0

3 つの div を横に並べようとしています。2 つのサイド div は、ページの残りの部分を均等に埋める必要があります。

    <div class="second_bar">
        <div class="status_border_left">
        </div><div class="nav_bar">
        </div><div class="status_border_right">
        </div>
    </div>

私のCSS：

.status_border_left{
    //width:100px;
    height:14px;
    background-color:yellow;
}
.status_border_right{
    //width:100px;
    height:14px;
    background-color:yellow;
}
.nav_bar{
    position:relative;
    margin: 0 auto;
    height:80px;
    width:980px;
    background-color:green;
}
.second_bar *{
    display:inline-block;
    vertical-align:top;
}
.second_bar{
    height:80px;
    width:100%;
}

JavaScriptを使わずにやりたいことをする方法はありますか?

4

3 に答える 3

1

css3 flexbox モジュールを試すことができます。このような：

HTML

<div class="second_bar">
  <div class="status_border_left">left</div>
  <div class="nav_bar">nav bar</div>
  <div class="status_border_right">right</div>
</div>

CSS

html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.second_bar {
  width: 100%;
  min-height: 100%;
  color: #fff;

  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.status_border_left,
.status_border_right {
  width: 20%;
  background: green;
}
.nav_bar {
  -moz-flex-box: 1;
  -webkit-flex-box: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background: orange;
}

デモをご覧ください。

于 2013-06-18T01:46:08.303 に答える
1

tableとの CSS 表示タイプを使用してそれを行う 1 つの方法を次に示しますtable-cell。

左右の子要素に小さな変更を加える必要があります.content。コンテンツを囲むラッパー div を定義するだけです。

HTML : _

<div class="second_bar">
    <div class="status_border left">
        <div class="content"></div>
    </div>

    <div class="nav_bar"></div>

    <div class="status_border right">
        <div class="content"></div>
    </div>
</div>

そしてCSS：

.second_bar {
    height:80px;
    width:100%;
    border: 1px dotted blue;
    display: table;
}
.status_border {
    display: table-cell;
    vertical-align: top;
    width: auto;
    background-color: yellow;
}
.status_border .content {
    width: auto;
    height: 14px;
    background-color: pink;
}
.nav_bar {
    display: table-cell;
    vertical-align: top;
    height: 80px;
    width: 980px;
    min-width: 980px;
    background-color: green;
}

コンテナ ブロック.second_barの場合、表示タイプをtableに、幅を 100% に設定します。

子要素.status_borderと.nav_barにはdisplay: table-cellとvertical-align: topがありますが、レイアウト要件に応じて調整できます。

子 divの.nav_bar幅は 980 ピクセルですが、テーブル セルであるため、ウィンドウが十分に小さい場合、幅は 980 ピクセル未満に縮小される可能性があります。表のセルは、必要に応じてコンテンツに合わせて縮小されます。全幅を維持するには、 を幅に設定しmin-widthます。

左右のステータス インジケーター バーの高さを 14 ピクセルにするには、左右の子要素を持つ個別のブロック要素が必要です。

デフォルトでは、3 つのtable-cellブロックは 3 つのテーブル セルの中で最も高い高さ (この場合は 80 ピクセルの.nav_bardiv) になります。

の幅を auto に設定.contentすると、両方が同じ幅になり、使用可能なページ幅の残りを埋めます。

table-cellIE8 ではサポートされていませんが、それ以外の場合、これは非常に便利なパターンです。

http://jsfiddle.net/audetwebdesign/SyAAQ/でデモ フィドルを参照してください。

于 2013-06-18T01:27:42.473 に答える