3

1行に3つのdivがあります

<div id="left"></div> <div id="middle"></div> <div id="right"></div>

これがどのようにレイアウトされているかです

固定幅を維持するには中央の div が必要ですが、画面が小さくなると左右の div が縮小されます。例を次に示します。

cssはどうやって書くの？

これは私がこれまでに行った方法です。ちなみに、3 つの div は別の div#mid にラップされています

#mid { max-width: 100%; min-height: 395px; max-height: 395px; position: relative; background-color: #F00; display: block; }

#left { min-width:35%; min-height: 395px; max-height: 395px; background-color: #00F; position:relative; float: left; }

#middle { min-width:30%; min-height: 395px; max-height: 395px; background-color: #3F0; position:relative; float: left; }

#right { min-width:35%; min-height: 395px; max-height: 395px; margin:0; padding:0; background-color: #0FF; position:relative; float: left; } 誰かが私を助けてくれるなら、本当に感謝しています。

4

3 に答える 3

1

その非常に単純な方法は、中央の div に固定幅を与えるwidth:300pxことです ...これが役立つことを願っています...

于 2012-10-12T08:11:45.643 に答える
0

とてもシンプル。

  1. 3 つの div をフロートします。
  2. 表示プロパティを「インライン ブロック」に設定します。
  3. 中間divの幅属性を設定します。
  4. 左右の div の最大幅属性を設定します。

私がテストしたHTMLマークアップは次のとおりです。

<body>
    <div id="left">LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT</div>
    <div id="middle"></div>
    <div id="right">
        RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT
    </div>
</body>

サンプル CSS は次のとおりです。

#right,
#left {
 background-color:green;
 float:left;
 display:inline-block;
 max-width:20%;
 min-height:20px;
}
​#middle {
 width: 60%;
 float:left;
 display:inline-block;
 background-color:blue;
 min-height:20px;
}​

そして、ここに実装があります: http://jsfiddle.net/3yEv3/

于 2012-10-12T07:47:57.717 に答える