0

覚えておいてください: これらの要素の画面上の動作を想像してみてください: 画面上に 100 を超える要素がある場合<div>のスタイル。float: left; height: 100px; width: 100pxウィンドウのサイズを低い幅に変更すると、div が押し下げられます

例 http://1lj.net/ex2.html

必要なもの: リンクされた例のように動作する子 div が必要です。問題は、子 div が固定幅のコンテナーにあることです。例えば。<div class=container style="width:800px">

この動作を取得するにはどうすればよいですか?

私の英語で申し訳ありませんが、母国語ではない言語で書くのは本当に難しいです.

4

2 に答える 2

2 
<div style="float:left;width:500px"></div><div style="float:left;width:500px"></div>

となります ...

 <div style="float:left;width:500px"></div>
 <div style="float:left;width:500px"></div>  ( like text wraps)

...ウィンドウサイズがそれらを保持するのに十分な幅がない場合

これを防ぐには、幅のあるコンテナを追加します...

 <div style="width:1000px">
  <div style="float:left;width:500px"></div><div style="float:left;width:500px"></div>
 </div>
  • デモンストレーションを容易にするためにインラインスタイルのみを使用

コメントとして更新: 幅が固定されていない場合は同じですが、パーセンテージを使用します

  <div style="width:100%">
  <div style="float:left;width:50%"></div><div style="float:left;width:50%"></div>
 </div>
于 2012-05-17T22:03:00.343 に答える
1

2つのコンテナが必要です。1つのコンテナは最大幅用で、もう1つはボックスを保持するためのものです。

CSS：

.container
{
    height:auto;
    max-width: 800px;
    margin: 0 auto;
    background-color: #666666;
}

.containercontent {
    position: relative;
    width: auto;
    margin: 0 auto;
}

HTML：

<div class="container"> <!-- Add this container -->
<div class="containercontent">

<h2>Lalalalal.</h2>

<div class="box" id=box1></div>
<div class="box" id=box2></div>
<div class="box" id=box3></div>
<div class=box id=box4></div>
<div class=box id=box5></div>
<div class=box id=box6></div>
<div class=box id=box7></div>
<div class=box id=box8></div>
<div class=box id=box9></div>
<div class=box id=box10></div>
<div class=box id=box11></div>
<div class=box id=box12></div>
<div class=box id=box13></div>
<div class=box id=box14></div>
<div class=box id=box15></div>
<div class=box id=box16></div>
<div class=box id=box17></div>
<div class=box id=box18></div>
<div class=box id=box19></div>
<div class=box id=box20></div>

</div>
<div class="clean"></div>
</div>
于 2012-05-17T23:23:23.873 に答える