我在外部有一个嵌套的div,宽度为100%。两个嵌套的div应该在一行中,首先应该从它的内容中获取它的大小:
<div id="#outer" style="width:100%; border:1px">
<div id="#inner1" style="border:1px; display:inline">
inner div 1. Some text...
</div>
<div id="#inner2" style="width:100%????; border:1px; display:inline">
inner div 2...
</div>
</div>
问题是如果没有指定#inner1 div的宽度并且取决于它里面的内容,如何使#inner2 div获得水平空间的其余部分?
P.S。在我的情况下,所有样式都在不同的类中,这里我将CSS放入样式属性只是为了简化。
我希望结果能够在IE7 +和FF 3.6中使用
对我来说更多细节看起来像这样:
<style type="text/css">
.captionText
{
float:left;
}
.captionLine
{
height: 1px;
background-color:black;
margin: 0px;
margin-left: 5px;
margin-top: 5px;
border: 0px;
padding: 0px;
padding-top: 1px;
}
</style>
<table style="width:300px;">
<caption width="100%">
<div class="captionText">Some text</div>
<div class="captionLine"> </div>
</caption>
<tr>
<td>something</td>
</tr>
</table>
以下是我想要的图像:
答案 0 :(得分:85)
神秘的overflow: hidden;
是你的朋友。它会阻止浮子附近的元素延伸到浮子后面 - 我认为这是你正在寻找的布局。
以下是一些略微编辑的HTML:我认为您的#
中不能包含id
个字符:
<div id="outer">
<div id="inner1">
inner div 1. Some text...
</div>
<div id="inner2">
inner div 2...
</div>
</div>
这是用于实现所需布局的CSS。
(我使用HTML conditional comments为IE 6添加了额外的CSS。我只是注意到你实际上并不需要它在IE 6中工作,但是如果你喜欢那样的IE 6用户那么好...)
<style type="text/css">
#outer {
overflow: hidden;/* Makes #outer contain its floated children */
width: 100%;
/* Colours and borders for illustration purposes */
border: solid 3px #666;
background: #ddd;
}
#inner1 {
float: left;/* Make this div as wide as its contents */
/* Colours and borders for illustration purposes */
border: solid 3px #c00;
background: #fdd;
}
#inner2 {
overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */
/* Colours and borders for illustration purposes */
border: solid 3px #00c;
background: #ddf;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */
}
#inner1 {
margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */
}
</style>
<![endif]-->
在IE 6,7和8中测试并工作; Firefox 3.5;和Chrome 4。
答案 1 :(得分:3)
如果你现在正在阅读,你可以使用calc
,所以要感恩。
<强> HTML 强>
<div class="universe">
<div class="somewidth">
</div>
<div class="everythingelse">
</div>
</div>
<强> CSS 强>
.universe {
width: 100%;
height: 100%;
}
.somewidth {
width: 200px;
height: 100%;
}
.everythingelse {
width: 800px; /* fallback for emergencies */
width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
height: 100%;
}
答案 2 :(得分:0)
你需要将inner1 div浮动到左边,如下所示:
<div id="#outer" ....>
<div id='#inner1" style="float:left; border: 1px solid #000;">
blabla
</div>
<div id="#inner2" style="... DON'T USE WIDTH AND DISPLAY HERE! ...">
gnihihi
</div>
</div>
这应该可以解决问题。看看这个! 再见
答案 3 :(得分:0)
您不需要为嵌套元素使用div,只需像这样使用SPAN
<div>
<span style="display:inline-block;width: auto;border: solid 1px black;">
hey you
</span>
<span style="display:inline-block;marging: 0px 2px;border: solid 1px black;">
always use proper tools.
</span>
</div>
答案 4 :(得分:0)
扩展@Nasser Hajloo的回答,这对我有用(即使在IE6中)
<div style="width: 400px; border: solid 1px red;">
<span style="float:left;width: auto;border: solid 1px black;">
hey you
</span>
<div style="display:inline-block;margin: 0px 2px;border: solid 1px black;">always use proper tools.</div>
</div>
尝试使用小于400px的主div来查看它如何调整。 (它也适用于div而不是跨度 - 关键是第一个div / span中的 width:auto 。)
答案 5 :(得分:0)
试试这个:在inner1
内嵌套inner2
,然后从display:inline
移除inner2
,如下所示:
<div id="#outer" style="width:100%; border:1px solid red">
<div id="#inner2" style="width:100%; border:1px solid black;">
<div id="#inner1" style="border:1px solid blue; display:inline">
inner div 1. Some text...
</div>
inner div 2...
</div>
</div>
您可以在此处看到它:http://jsbin.com/adiwi
答案 6 :(得分:0)
从您的代码中看起来您正试图获得一条水平线来填充div中的空白区域。如果我是正确的,你想要用标记创建视觉效果。如果我错了,请纠正我。
(很高兴看到你想要的图像)
示例:
Title ---------------------------
or
Title: Caption ------------------
这不是最佳做法。您应该尝试使用CSS获得此效果。
首先尝试使代码更具语义性:
<div id="#outer" style="width:100%; border:1px">
<h3 style="border:1px; display:inline">
Caption
</h3>
</div>
获取该行:
background
定位
属性
#outer h3 {
display: inline;
background-color: #000;
color: #FFF;
}
#outer {
width: 100%; /* is the default of block element but just for celerity */
background: #000 url('image path') center left; /* position the image */
}
答案 7 :(得分:0)
你的第一个问题是你在id上加上'#'。 #仅在CSS中用于引用具有该id的元素,例如CSS规则 #outer {width:100%} 是指您的元素:
<div id="outer"></div>
此外,您不需要在未浮动的div(或任何其他块元素)上使用宽度,因为它们已经自动占用了可用宽度的100%。
如果你想让2个DIV出现在同一条线上,你必须将第一个DIV浮动到左边。然后,相邻的DIV将出现在侧面,同样您不需要为第二个元素指定widthd。这是您的完整示例,包括每个div的不同颜色边框。
我已经使边界更大,所以你可以看到更清晰的事情。
<html><body>
<style type="text/css">
#outer {
border: solid 5px #c00;
}
#inner1 {
border: solid 5px #0c0;
float: left;
width: 200px;
height: 300px;
}
#inner2 {
border: solid 5px #00c;
height: 300px;
margin-left: 210px; /* 200px left width + 2 x 5px borders */
}
</style>
<div id="outer">
<div id="inner1">
inner div 1. Some text...
</div>
<div id="inner2">
inner div 2...
</div>
</div>
</body></html>
答案 8 :(得分:0)
另一种解决方案是运行一个javascript,当文档像这样加载时调整captionLine类的大小。
花了一些时间让它在IE8下工作,没有尝试IE7但应该工作。
需要注意的两件事。
<body onload="resizeCaptionLine()">
<style>
caption {
border: 1px solid blue;
padding: 0px;
}
.captionText {
border: 1px solid red;
float: left;
}
.captionLine {
background-color:black;
margin: 0px;
margin: 5px 0px 0px 5px;
border: 0px;
padding: 0px;
padding-top: 1px;
}
</style>
<table style="width:300px;">
<caption width="100%" name="caption1">
<div class="captionText">Some text</div>
<div class="captionLine"> </div>
</caption>
<tr>
<td>something</td>
</tr>
</table>
<table style="width:300px;">
<caption width="100%" name="caption2">
<div class="captionText">Some text</div>
<div class="captionLine"> </div>
</caption>
<tr>
<td>something</td>
</tr>
</table>
<script type="text/javascript">
function getElementsByClassName(node, class_name) {
elems = node.all || node.getElementsByTagName('*');
var arr = new Array();
for(j = 0; j < elems.length; j++)
{
if (elems[j].className == class_name)
arr[arr.length] = elems[j];
}
return arr;
}
function resizeCaptionLine()
{
var elems = getElementsByClassName(document, 'captionLine');
for(i = 0; i < elems.length ; i++)
{
var parent = elems[i].parentNode;
var sibling = getElementsByClassName(parent, 'captionText');
var width = parent.offsetWidth - sibling[0].offsetWidth;
if(elems[i].currentStyle)
{
var currentMargin = elems[i].currentStyle.marginLeft;
var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
}
else if (document.defaultView && document.defaultView.getComputedStyle)
{
var currentStyle = document.defaultView.getComputedStyle(elems[i], '');
var currentMargin = currentStyle.marginLeft;
var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
elems[i].style.marginLeft = (sibling[0].offsetWidth + margin) + "px";
}
else
{
var currentMargin = elems[i].style.marginLeft;
var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
}
elems[i].style.width = (width - margin)+"px";
}
}
</script>
</body>
答案 9 :(得分:0)
答案很简单!如果您在左侧有固定的div(菜单),则给出固定的div float:left 和右边的灵活div margin-left ,它比第一个固定的宽度大格。