4

これが私がやりたいことです。

ピンタレスト

10 個以上の長方形の div があるとします。これらの div を 5 つ並べて配置し、他の 5 つを他の 5 つの下に配置したいと考えています。私の質問は;

div にどのように名前を付ける必要がありますか? divごとにクラス名を変更するか、IDを変更する必要がありますか、または指定する必要があります。

float:left

すべての div に属性を付けて、並べて配置できるようにします。そのため、水平に場所がない場合は、残りの 5 つがその下に配置されます。

つまり、これらの 10 個 (またはそれ以上) の div の構造はどうあるべきですか?

4

3 に答える 3

1

クラスを使用すると、名前を変更せずに複数のオブジェクトに使用できます。
これを試して：

<style>
.container {
    overflow:auto;
}
.sidebyside {
    float:left; 
    width:100px; 
    height:100px; 
    border-style:solid; 
    margin:5px;
}
.belowdiv {
    width:300px; 
    height:100px; 
    border-style:solid; 
    margin:5px;
}
</style>

<div class="container">
    <div class="sidebyside">div0</div>
    <div class="sidebyside">div1</div>
    <div class="sidebyside">div2</div>
    <div class="sidebyside">div3</div>
    <div class="sidebyside">div4</div>
</div>
<div class="belowdiv">div5</div>
<div class="belowdiv">div6</div>
<div class="belowdiv">div7</div>
<div class="belowdiv">div8</div>
<div class="belowdiv">div9</div>
于 2013-07-19T11:10:27.510 に答える
0

できることは、すべての div のコンテナーを作成することです。そして、それらの下に 10 個の div を追加します。

<div id="divContainer">

    <div class="theDiv">
         //Div content 1
    </div>

    <div class="theDiv">
         //Div content 2
    </div>

    <div class="theDiv">
         //Div content 3
    </div>

    <div class="theDiv">
         //Div content 4
    </div>

    <div class="theDiv">
         //Div content 5
    </div>

    <div class="theDiv">
         //Div content 6
    </div>

    <div class="theDiv">
         //Div content 7
    </div>

    <div class="theDiv">
         //Div content 8
    </div>

    <div class="theDiv">
         //Div content 9
    </div>

    <div class="theDiv">
         //Div content 10
    </div>

</div>

その後、スタイリングを追加します。

  • まず、divContainer に幅を設定します。コンテナーが 1000px で、内部の各 div が 200px であるとします。
  • 次に、float プロパティを追加します。

何かのようなもの。

<style>  
    #divContainer {background: blue; width: 1000px; float: left;}
    .theDiv {background: pink; float: left;}
</style>

その後、より多くのプロパティをオフコースして、余白などのように見栄えを良くすることができます。

これがお役に立てば幸いです=）

于 2013-03-11T13:56:49.387 に答える