2

次のコードを検討してください。

CSS：

.output {
    margin-right:10px;
    border:1px solid #000;
}
.box{
    border-right:1px solid #000;
}
.first{
    border-left:1px solid #000;
}

HTML：

<div class="line">
    <div class="output">5</div>
    <div class="boxes">
        <div class="box first"><span>&nbsp;</span></div>
        <div class="box"><span>&nbsp;</span></div>
        <div class="box"><span>&nbsp;</span></div>
        <div class="box"><span>&nbsp;</span></div>
        <div class="box last"><span>&nbsp;</span></div>
    </div>
</div>

divを水平方向に並べて、「line」div'（親のスペース）を埋めたいのですが、動的に、たとえば、各ボックスに固定幅を指定したくないので、水平方向のスペースを埋めたいだけです。 。

これはできますか？

4

2 に答える 2

1

これを行うための簡単で広くサポートされている方法はですdisplay: table。

参照： http： //jsfiddle.net/thirtydot/tPCwD/

.box要素の数を変更しても機能することに注意してください。

.line {
    border: 3px solid red;
    display: table;
    width: 100%;
}
.output {
    padding-right: 10px;
    display: table-cell;
    width: 1px; /* take the minimum amount of space */
    white-space: nowrap;
}
.output > span {
    border:1px solid #000;
}
.boxes {
    display: table;
    width: 100%;
    table-layout: fixed; /* to force equal width columns */
}
.box {
    border-right:1px solid #000;
    display: table-cell;
    background: #ccc;
}
.first {
    border-left:1px solid #000;
}

IE7以下のサポートが必要な場合は、それらのブラウザーにのみJavaScriptを使用できます（条件付きコメント）。.htcJavaScriptポリフィルが利用可能ですが、このレイアウトでどれだけうまく機能するかはわかりません。または、実際のを使用することもできます<table>。

于 2012-05-30T10:45:49.123 に答える
0

水平方向のスペースを埋めるだけの場合はoutput、で使用します。そうすれば、必要なだけのスペースを占有し、ボックスが残りのスペースを埋めます。boxesfloat:leftoutputboxes

一方、box div親を埋めるために5つのsが必要な場合は、それぞれにaを指定し、境界線を考慮に入れるようにwidth:20%設定します。box-sizing:border-boxこの場合、各ボックスの大きさをブラウザに知らせる必要があります。そうしないと、スペースを埋めるためにどのボックスを展開するかをブラウザがどのように知ることができるでしょうか。

box「最先端」になりたい場合の5esの別の代替手段は、フレックスボックスの仕様を調べることです。

于 2012-05-30T09:55:00.720 に答える