Question

我正在制作一个带有标签的输出字段。由于标签名称，每个标签都有不同的宽度，我想让输出字段占用标签和下一个标签之间的剩余宽度。现在，如果字段中有文本，则输出字段的宽度只会增加。

HTML：

<div class="row">
    <div class="div triple"><label for="bedrijf">Bedrijfsnaam</label>
        <span class="output" id="bedrijf"></span></div>
    <div class="div triple"><label for="functie">Functie</label>
        <span class="output" id="functie"></span></div>
    <div class="div triple"><label for="kvk">KVK-nummer</label>
        <span class="output" id="kvk"></span></div>
</div>

CSS：

.row {
    float: left;
    width: 100%;
}
.triple {
    width: 33%;
}
.output {
    width: auto;
    text-align: left;
    color: #f57f43;
    display: inline-block;
}

Answer 1

这里已多次提出这个问题。谷歌真的可以帮助你知道;）有趣的链接在这里：Expand a div to take the remaining width
解决方案是

.row {
    width: 100%;   
}
.triple {
    width: 33%;
    float: left;
}

.output {
    height: 20px;
    vertical-align: middle;
    overflow: hidden;
    text-align: left;
    color: #f57f43;
    display: block;
    width: auto;
    background-color: black;
}
label{display: inline-block; float: left;}

http://jsfiddle.net/piiantom/d5w1ntaf/

如何让div占用剩余的宽度？

1 个答案: