0

私は2つの部門を持っています。1 つは N 個の正方形を持ち、もう 1 つの div は 1 つの正方形を持ちます。すべての正方形をインライン化する必要があります。つまり、「section-loaded」の div の四角形は3 行と 4 行目の半分に次々と配置され、 「section-toload」の四角形は同じ 4 行目に配置され、下には配置されません。ここにフィドルがあります -

http://jsfiddle.net/UPA4V/

<div class="fix_width650px">
    <div class="section-loaded">
        <div class = "square"></div>
        <div class = "square"></div>
        <div class = "square"></div>
        <div class = "square"></div>
        .
        .
        .
    </div>

    <div class="section-toload">
        <div class = "square"></div>
    </div>
</div>

CSS-

.square{
    width: 150px;
    height: 150px;
    padding: 5px;
    text-align: center;
    display: inline-block;
    position: relative;
}

.section-loaded{
    display: inline-block;
    float: left;

}

.section-toload{
    display: inline-block;
    float: left;
    position: relative;
    overflow: hidden;

}
4

6 に答える 6

1

私はあなたがそれを行うことができるとは思わない. 'setion-loaded' は 1 行以上を使用しているため、このセクションの幅が 100% になり、次が何であれ新しい行に移動します。つまり、'section-toload' は新しい行に移動します。

できることは、すべての正方形を 1 つのセクションに配置し、それらがロードされている場合は追加のクラス 'loaded' を適用し、それらのクラス 'toload' をロードすることです。

    <div class="section">
      <div class="square loaded"></div>
      <div class="square loaded"></div>
      <div class="square loaded"></div>
      <div class="square loaded"></div>
      ...
      ...
      ...
      <div class="square toload"></div> 
    </div>

CSS -

   .square {
      float: left;
      width: 150px;
      /** other styles **/  
   }
于 2013-04-02T07:08:06.873 に答える
0

このようなものが必要な場合。 ここに画像の説明を入力

.square
{

width: 150px;
height: 150px;
padding: 5px;
text-align: center;
float:left;
position: relative;
border:1px solid red;
}

.section-loaded{
display: block;
width:486px;
float: left;
}

.section-toload{
display: block;
float: left;
position:absolute;
overflow: hidden;
}


<div class="fix_width650px" style="height:326px;">
<div class="section-loaded">
<div class = "square">square1</div>
<div class = "square">square2</div>
<div class = "square">square3</div>
<div class = "square">square4</div>
</div>


</div>
<div class="section-toload"  style="position :relative;">
<div class = "square">section-toload</div>
</div>
于 2013-04-02T07:17:29.587 に答える