Question

我想要一行，文字+文字+中央栏（必须填写剩余的宽度）。

我试过了：

HTML：

    <div class="title-cont">
    <div class="title-num">1.</div>
    <div class="title-text">Title from section</div>
    <div class="title-bar"></div>    
</div>

CSS：

.title-cont { float:left; clear:left; width:600px; white-space:nowrap; overflow:hidden; }
.title-num { float:left; font-size:20px; color:red; }
.title-text { float:left; font-size:16px; color:blue; }
.title-bar { float:left; width:100%; height:5px; background:red; }

网址：http://fiddle.jshell.net/5bt4S/2/

Answer 1

停止浮动上一个<div>并为其隐藏溢出，并且您将获得我认为您正在寻找的内容：

.title-bar { overflow:hidden; height:5px; background:red; }

条形图将填充所有可用宽度。

JSFiddle

Answer 2

将您的CSS改为此

.title-cont { float:left: clear:left; width:600px; white-space:nowrap; overflow:hidden; }
    .title-num { float:left; font-size:20px; color:red; }
    .title-text { float:left; font-size:16px; color:blue; }
    .title-bar { overflow:hidden; height:5px; background:red; }

Answer 3

试试这个

.title-cont { float:left; width:600px; white-space:nowrap; overflow:hidden; }
.title-num { float:left; font-size:20px; color:red; }
.title-text { float:left; font-size:16px; color:blue; }
.title-bar {display:inline-block;width:100%; height:5px; background:red; }

如何做3个div在线和最后一个自动宽度？

3 个答案: