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

Question

提问by Artem

I have 2 nested divs inside outer one, which has width:100%. Both nested divs should be in one line and first should get it size from it's contents:

我在外层有 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>

Question is how to make #inner2 div to get rest of the horizontal space if width of the #inner1 div is not specified and depends on what it is inside?

问题是如果未指定 #inner1 div 的宽度并且取决于它内部的内容，如何使 #inner2 div 获得其余的水平空间？

P.S. All styles are in separate classes in my case, here I putted CSS into style attributes just for simplification.

PS 就我而言，所有样式都在单独的类中，在这里我将 CSS 放入样式属性中只是为了简化。

I want result to work in IE7+ and FF 3.6

我希望结果在 IE7+ 和 FF 3.6 中工作

In more details for me it looks like this:

对我来说，它看起来像这样：

 <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>

Here is the image of what I want:

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

Answer 1

回答by Paul D. Waite

The mysterious overflow: hidden;is your friend here. It stops elements adjacent to floats from extending behind the float — I think that's the layout you're looking for.

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

Here's some slightly edited HTML: I don't think you can have #characters in your ids:

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

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

And here's the CSS to achieve the layout you want.

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

(I put in additional CSS for IE 6 with HTML conditional comments. I just noticed you didn't actually need it to work in IE 6 too, but if you fancy being nice to the IE 6 users out there...)

（我使用 HTML条件注释为 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]-->

Tested and working in IE 6, 7, and 8; Firefox 3.5; and Chrome 4.

在 IE 6、7 和 8 中测试和工作；火狐 3.5；和铬 4。

Answer 2

回答by fiatjaf

If you're reading this now you can probably use calc, so be thankful.

如果您现在正在阅读本文，您可能可以使用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%;
}

See the working example on JSFiddle.

请参阅JSFiddle 上的工作示例。

Answer 3

回答by aefxx

You would need to float the inner1 div to the left, like so:

您需要将 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>

This should do the trick. Check it out! bye

这应该可以解决问题。一探究竟！再见

Answer 4

回答by Nasser Hadjloo

You do not need to use div for nested element, just use SPAN like this

您不需要为嵌套元素使用 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>

Answer 5

回答by Traingamer

Expanding on @Nasser Hajloo's answer, this works for me (even in IE6)

扩展@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>

Try it with the main div smaller than 400px to see how it adjusts. (It also works with divs rather than spans - the key is the width: autoin the first div/span.)

尝试使用小于 400px 的主 div 来查看它是如何调整的。（它也适用于 div 而不是跨度 - 关键是width: auto在第一个 div/span 中。）

Answer 6

回答by graphicdivine

Try this: nest inner1inside inner2, and remove the display:inlinefrom inner2, like this:

试试这个： 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>

You can see it working here: http://jsbin.com/adiwi

你可以在这里看到它的工作：http: //jsbin.com/adiwi

Answer 7

回答by Kevin

From your code it looks like you are trying to get a horizontal line to fill the empty space in your div. If I'm correct your looking to create a visual effect with markup. Correct me if I'm wrong.

从您的代码来看，您似乎正在尝试使用一条水平线来填充 div 中的空白区域。如果我是正确的，您希望使用标记创建视觉效果。如果我错了纠正我。

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

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

Example:

例子：

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

or

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

This is not best practice. You should try to get this effect with CSS.

这不是最佳实践。您应该尝试使用 CSS 获得这种效果。

Try making your code more semantic first:

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

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

To get the line:

获取线路：

create an image with the color you want
make its height the same that you want the line to be in px
position it with the backgroundproperty

用你想要的颜色创建一个图像
使其高度与您希望线条在 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 */
}

Answer 8

回答by mythz

Your first problem is that you are prefixing your ids with a '#'. The # is only used in CSS to refer to the element with that id, e.g. the CSS rule #outer{width:100%}refers to your element:

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

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

Also you don't need to use width's on div's (or any other block elements) that aren't floated, as they already automatically take up 100% of the available width.

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

If you want to the 2 DIVs to appear on the same line you have to float the first one to the left. The adjacent DIV will then appear on the side, again you don't need to sepecify widthd for the second element. Here is your complete example including a different coloured border for each div.

如果您想让 2 个 DIV 出现在同一行上，您必须将第一个 DIV 浮动到左侧。然后相邻的 DIV 将出现在侧面，同样您不需要为第二个元素指定宽度。这是您的完整示例，包括每个 div 的不同颜色边框。

I've made the borders bigger so you can see clearer whats going on.

我已将边界放大，以便您可以更清楚地看到正在发生的事情。

<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>

Answer 9

回答by Erik

Another solution is to run a javascript which resizes the captionLine class when document has loaded like this.
Took some time to get it working under IE8, have not tried IE7 but should work.
2 things to note.

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

IE does not support getElementsByClassName, therefor this function is rewritten.
IE handles margins differently when objects are resized and moved with style.marginLeft, somehow IE seems to keep the margin in the class declaration and adds this to the new style.margin.

IE 不支持 getElementsByClassName，因此该函数被重写。
当使用 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>

Answer 10

回答by Domen

Answer is really simple! If you have fixed div (menu) on the left side, then give fixed div float: leftand your right flexible div margin-leftthat is bigger then width of first fixed div.

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

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

提问by Artem

回答by Paul D. Waite

回答by fiatjaf

回答by aefxx

回答by Nasser Hadjloo

回答by Traingamer

回答by graphicdivine

回答by Kevin

回答by mythz

回答by Erik

回答by Domen

相关推荐

最近更新

标签

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

提问by Artem

回答by Paul D. Waite

回答by fiatjaf

回答by aefxx

回答by Nasser Hadjloo

回答by Traingamer

回答by graphicdivine

回答by Kevin

回答by mythz

回答by Erik

回答by Domen

相关推荐

从 html 表格单元格中删除顶部边框

从 VBA 中的 HTML 源获取数据（excel）

Html input type="button" 的 CSS 属性选择器不适用于 IE7

如何在网站 HTML/CSS 上放置背景视频循环

相关推荐

最近更新

标签