私は7divを並べて配置しようとしていますが、少しユニークです。こちらのリンクからこれまでに行ったことを確認し、ページのソースを表示できます。
ブラウザフォームを左または右にドラッグする距離に関係なく、中央のdivの幅が左中央と右中央のdivの間のスペースを埋めるようにします。現時点では、中央のdivの左右に空白があります。
誰か助けてくれませんか?
あなたはそれを達成することができます<table>
。divベースの構造を使用するふりをしている場合は、display:table
etc...を使用してdivの動作をシミュレートできます。
ここにHTMLがあります:
<div style="display:table;width:100%;">
<div style="display:table-row">
<div style="display:table-cell;width:100px;background:blue;">Left Fixed</div>
<div style="display:table-cell;width:auto;background:green;">Left Stretch</div>
<div style="display:table-cell;width:120px;background:yellow;">Left Middle</div>
<div style="display:table-cell;width:auto;background:#999;">Center</div>
<div style="display:table-cell;width:120px;background:yellow;">Right Middle</div>
<div style="display:table-cell;width:auto;background:green;">Right Stretch</div>
<div style="display:table-cell;width:100px;background:blue;">Right Fixed</div>
</div>
</div>
これがデモです:デモリンク
とで試してdisplay: inline-block
くださいwhite-space: nowrap
。
例:
HTML
<div class="parent">
<div class="child">first</div>
<div class="child2">first2</div>
<div class="child3">first3</div>
<div class="child4">first4</div>
<div class="child5">first5</div>
<div class="child6">first6</div>
<div class="child7">first7</div>
</div>
CSS
.parent{
margin:0 auto;
background:red;
font-size:0;
white-space:nowrap;
}
.child, .child1, .child2, .child3, .child4, .child5, .child6, .child7{
display:inline-block;
vertical-align:top;
width:100px;
padding:20px;
font-size:12px;
}
.child{
background:green;
}
.child2{
background:rgba(0,0,0,0.4);
}
.child3{
background:rgba(0,0,0,0.6);
}
.child4{
background:rgba(0,0,0,0.1);
}
.child5{
background:rgba(0,0,0,0.3);
}
.child6{
background:rgba(45,234,0,0.9);
}
.child7{
background:rgba(232,0,222,0.9);
}
左のdivの幅は45%です。あなたの右のdivも同様です。ただし、中央のdivの幅は8%なので、残りは2%です。
中央のdivの幅を10%にすると、ギャップがなくなります。
<div style="position: relative;">
<div style="margin-left: auto; margin-right: auto; width: 10%; margin-top: 0px; background-color: #999">
Center</div>
</div>
2つのdivの幅の合計が90%になり、中央のdivが8%になるので、これを修正すると、中央が中央を埋めます。
HTMLを使用すると、問題なくこれを実現できます<table>
。または、divベースの構造のみを使用してテーブルなしにしたい場合は、CSSでdisplay as 、、を使用してテーブルの動作をシミュレートできますtable
。table-row
table-cell
これがライブデモです。