0

Essentially I have one div, that holds four divs which all have float: left apart from the last one it has float: right.

I am building a responsive web page. I would like basically all three columns apart of the column "Name" to take up all the width they need. The remainder of the width should go into that column - if that makes sense. 

<div style="width: 100%; border-bottom: 1px solid #e5e5e5; padding: 10px 0 10px; font-size: 1.2em; overflow: auto;">
            <div style="float: left; width: 5%;"><input type="checkbox" id="ID"></div>
            <div style="float: left; width: 5%;">Code</div>
            <div style="float: left; width: 80%;">Name</div>
            <div style="float: right; width: 10%;">100 &euro;</div>
        </div>

Found the solution!

I found the solution! Removing the float and adding overflow hidden on the column that should adjust helped to get what I needed!

    <div style="width: 100%; border-bottom: 1px solid #e5e5e5; padding: 10px 0 10px; font-size: 1.2em; overflow: auto;">
            <div style="float: left; width: auto; margin-right: 1%;"><input type="checkbox" id="ID"></div>
            <div style="float: left; width: auto; margin-right: 3%;">Code</div>
            <div style="float: right; width: auto; margin-left: 3%;">100 &euro;</div>
            <div style="overflow: hidden;">Name></div>

        </div>
4

1 回答 1

0

指定 div 的浮动会强制内容在其周围流动，因此您只需不浮动最右边的 div 并让它默认就可以了。在您的情况下，只需从 100 euro div 中删除样式，它就会占用剩余的空间。

这里的问题是设置显式宽度百分比并不是您想要的——您需要做的是使用 javascript 根据其内部内容动态调整 div 的大小。

于 2013-07-11T21:54:53.223 回答