css - div 中的四列 : three of the the width depends on content; fourth one takes the rest

Question

基本上我有一个 div，它包含四个 div，它们都具有 float: left，最后一个具有 float: right。

我正在构建响应式网页。我希望基本上除了“名称”列之外的所有三列都能占据他们需要的所有宽度。宽度的其余部分应该进入该列 - 如果有意义的话。

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

找到解决方案!

我找到了解决方案!删除 float 并添加隐藏在应该调整的列上的溢出有助于获得我需要的东西!

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

Answer 1

指定 div 的 float 会强制内容围绕它流动，因此您只需不 float 最右边的 div 并让它默认即可。在您的情况下，只需从 100 欧元的 div 中删除样式，它将占用剩余的所有空间。

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