48

我在外层有 2 个嵌套 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 获得水平空间的其余部分？

PS 在我的例子中，所有样式都在单独的类中，这里我将 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>

这是我想要的图像： 我想要的图片

4

10 回答 10

85

神秘overflow: hidden;的是你在这里的朋友。它阻止与浮动相邻的元素在浮动后面延伸——我认为这就是您正在寻找的布局。

这是一些稍微编辑过的 HTML：我认为您的 s#中不能有字符id：

<div id="outer">
    <div id="inner1">
        inner div 1. Some text...
    </div>
    <div id="inner2">
        inner div 2...
    </div>
</div>

这是实现您想要的布局的CSS。

（我为 IE 6 添加了额外的 CSS 和 HTML条件注释。我只是注意到你实际上并不需要它也可以在 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 中测试和工作；火狐 3.5；和铬 4。

于 2010-02-12T12:46:28.403 回答
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%;
}

请参阅JSFiddle 上的工作示例。

于 2013-11-05T17:41:43.803 回答
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>

这应该可以解决问题。看看这个！再见

于 2010-02-04T08:13:06.653 回答
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>
于 2010-02-04T12:21:01.670 回答
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 中的自动。）

于 2010-02-04T20:45:39.160 回答
0

试试这个： nest inner1inside inner2，并删除display:inlinefrom 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

于 2010-02-09T14:09:53.947 回答
0

从您的代码看来，您正试图获得一条水平线来填充 div 中的空白空间。如果我是正确的，您希望使用标记创建视觉效果。如我错了请纠正我。

（很高兴看到您想要的图像）

例子：

Title ---------------------------

or

Title: Caption ------------------

这不是最佳做法。您应该尝试使用 CSS 来获得这种效果。

首先尝试使您的代码更具语义：

<div id="#outer" style="width:100%; border:1px">
  <h3 style="border:1px; display:inline">
    Caption
  </h3>
</div>

要获得这条线：

  1. 使用您想要的颜色创建图像
  2. 使其高度与您希望该行以 px 为单位的高度相同
  3. 将其与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 */
}
于 2010-02-12T13:18:17.730 回答
0

你的第一个问题是你在你的 id 前面加上一个“#”。# 仅在 CSS 中用于指代具有该 ID 的元素，例如 CSS 规则#outer{width:100%}指的是您的元素：

<div id="outer"></div>

此外，您不需要在未浮动的 div（或任何其他块元素）上使用宽度，因为它们已经自动占用了 100% 的可用宽度。

如果您希望 2 个 DIV 出现在同一行，则必须将第一个 DIV 浮动到左侧。然后相邻的 DIV 将出现在侧面，同样您不需要为第二个元素指定宽度。这是您的完整示例，包括每个 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>
于 2010-02-13T02:01:46.513 回答
0

另一种解决方案是运行一个javascript，当文档像这样加载时，它会调整captionLine类的大小。
花了一些时间让它在 IE8 下工作，没有尝试过 IE7，但应该可以工作。
2 件事要注意。

  1. IE不支持getElementsByClassName，因此重写了这个函数。
  2. 当使用 style.marginLeft 调整对象大小和移动对象时，IE 以不同方式处理边距，不知何故，IE 似乎在类声明中保留边距并将其添加到新的 style.margin。 
<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>
于 2010-02-13T19:49:23.803 回答
0

答案真的很简单！如果您在左侧有固定的 div（菜单），那么给定的 div float: left和您的 right 灵活的 div margin-left大于第一个固定 div 的宽度。

于 2012-01-27T19:32:51.847 回答