Question

我不确定如何工作我想要完成的事情所以请耐心等待......

我正在尝试根据前进元素的宽度设置元素的宽度。在视觉上它看起来像这样：

 container element
 --------------------------------------------
 |                         |                |
 |                         |                |
 |<--auto width for div1-->|<--div2 200px-->|
 |                         |                |
 |                         |                |
 --------------------------------------------

所以，基本上，div2设置为浮动在页面右侧，div1应自动跨越div2的右边缘

我在http://jsfiddle.net/yUvJs/

开始了小提琴

任何帮助都将非常感谢...提前感谢...

Answer 1

只需使用表格。摆脱float，将两个框div设置为display:table-cell，将容器div设置为display:table。然后，第一个框应根据第二个框的宽度自动调整其宽度。

Fiddle example

Answer 2

您可以使用CSS 3中新增的calc()功能，允许第一个<div>范围100％宽度的包含块减去 200px的第二个<div> - 只记得在每个子元素上考虑2px的边框：

#box1 {  
display:inline-block;  
border:1px dashed blue; 
height:100%; 
opacity:.8; 
background:#ccc; 
width: -webkit-calc(100% - 204px);
width: -moz-calc(100% - 204px);
width: calc(100% - 204px); /* 2px + 2px dotted border */
}

Example

Answer 3

我建议在JavaScript中实现它。你会在JavaScript中做这样的事情：

var cont = document.getElementById("container");
var box2 = document.getElementById("box2");
var box1Width = cont.offsetWidth - box2.offsetWidth;
document.getElementById("box1").style.width = box1Width + "px" ;

我在你的小提琴上实现了这个，并进行了一些小改动，以证明它有效。看看：http://jsfiddle.net/yUvJs/26/

Answer 4

我不确定您的所有要求，但是如果您可以撤销html顺序：

<div id='container'>
    <div class='box' id='box2'></div>
    <div class='box' id='box1'></div>
</div>

然后移除display: inline-block（浮动时不应该使用），但将overflow: hidden（and its magic）应用到box1，然后您就能获得所需内容见于 this fiddle 。

Answer 5

我知道这个问题很旧，但是对于上述情况，可以使用flex：

HTML：

<div id='container'>
    <!-- If you want to give id/class is up to you, css selectors can do it pretty well too for generalization purposes -->
    <div>...data...</div>
    <div>...data...</div>
</div>

CSS：

#container{
    display:flex; flex-direction:row;
    width:700px; border:1px solid black; height:300px;
}
#container > div:nth-child(1){
    flex:auto;
    border:1px dashed blue; height:100%; opacity:.8; background:#ccc;
}
#container > div:nth-child(2){
    flex:initial;
    border:1px dashed red; width:200px; height:100%; opacity:.8; background:#eee;
}

尝试一下，看看display flex如何更优雅地解决您的问题

CSS根据第二个元素的宽度设置第一个元素的宽度

5 个答案: