0

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

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

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

因此，本质上，div2 设置为浮动在页面的右侧，并且 div1 应该自动跨越到 div2 的右边缘

我已经开始了一个小提琴：http: //jsfiddle.net/yUvJs/

任何帮助将不胜感激......在此先感谢......

4

5 回答 5

3

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

小提琴示例

于 2013-05-02T20:12:35.137 回答
2

您可以使用calc()CSS 3 中的新功能，允许第一个<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 */
}

例子

于 2013-05-02T19:32:09.380 回答
0

我建议在 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/

于 2013-05-02T19:50:17.253 回答
0

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

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

并删除display: inline-block（浮动时不需要），但应用 a overflow: hidden（及其魔法）box1然后你会得到你想要的，如this fiddle所示。

于 2013-05-02T19:54:02.310 回答
0

我知道这个问题很老，但对于上述情况，可以使用 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 如何更优雅地解决您的问题

于 2020-05-21T06:15:04.943 回答