1

私は7divを並べて配置しようとしていますが、少しユニークです。こちらのリンクからこれまでに行ったことを確認し、ページのソースを表示できます。

ブラウザフォームを左または右にドラッグする距離に関係なく、中央のdivの幅が左中央右中央のdivの間のスペースを埋めるようにします。現時点では、中央のdivの左右に空白があります。

誰か助けてくれませんか?

4

5 に答える 5

2

あなたはそれを達成することができます<table>。divベースの構造を使用するふりをしている場合は、display:tableetc...を使用して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>

これがデモです:デモリンク

于 2012-09-14T08:20:01.797 に答える
1

とで試して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);
}

LIveデモ

于 2012-09-14T08:36:32.157 に答える
0

左のdivの幅は45%です。あなたの右のdivも同様です。ただし、中央のdivの幅は8%なので、残りは2%です。

中央のdivの幅を10%にすると、ギャップがなくなります。

于 2012-09-14T08:00:22.800 に答える
0
<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%になるので、これを修正すると、中央が中央を埋めます。

于 2012-09-14T08:00:55.843 に答える
0

HTMLを使用すると、問題なくこれを実現できます<table>。または、divベースの構造のみを使用してテーブルなしにしたい場合は、CSSでdisplay as 、、を使用してテーブルの動作をシミュレートできますtabletable-rowtable-cell

これがライブデモです。

于 2012-09-14T08:07:23.093 に答える