首页 文章

xHTML / CSS：如何使内部div获得100％宽度减去另一个div宽度

提问于
浏览 次
48

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

附：在我的情况下，所有样式都在不同的类中，这里我将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>

这是我想要的图像：
Image of what I want

css xhtml html xhtml-1.0-strict

10 回答

  • 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>
    回复于
  • 85

    答案很简单！如果您在左侧有固定的div（菜单），则给出固定的div float: left 和右侧的灵活div margin-left ，它比第一个固定div的宽度大 .

    回复于
  • 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>

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

    回复于
  • 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而不是 Span - 关键是宽度：第一个div / span中的auto . ）

    回复于
  • 0

    神秘的 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 .

    回复于
  • 0

    试试这个：在 inner2 中嵌套 inner1 ，并从 inner2 中删除 display:inline ，如下所示：

    <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

    回复于
  • 0

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

    • IE不支持getElementsByClassName，因此重写此函数 .

    • IE在调整对象大小并使用style.marginLeft移动时处理边距的方式不同，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>
    回复于
  • 0

    从您的代码中看起来您正试图获得一条水平线来填充div中的空白区域 . 如果我是正确的，你想要用标记创建视觉效果 . 如我错了请纠正我 .

    (Would be nice to see an image of what you want)

    例：

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

or

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

    这不是最佳做法 . 您应该尝试使用CSS获得此效果 .

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

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

    得到这条线：

    • 使用您想要的颜色创建图像

    • 使其高度与您希望线在px中的高度相同

    • 将其与 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 */
}
    回复于
  • 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>
    回复于
  • 2

    如果你现在正在阅读这篇文章，你可以使用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%;
}

    见working example on JSFiddle .

    回复于

相关问题