Question

我有2个div。一个有N个正方形，另一个有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;

}

Answer 1

如果您将部分设置为float，将方块设置为float，则会起作用。

只有你需要的CSS：

.square { 宽度：150px; 身高：150px; 向左飘浮; }

Answer 2

我认为你不能那样做。由于'setion-loaded'占用超过1行，这意味着该部分的宽度变为100％，无论下一行是否在新行上，即'section-toload'在新行上。

你可以做的是在一个部分中包含所有正方形，并且如果它们被加载则应用额外的“加载”类，并且要加载它们的类'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 **/  
   }

Answer 3

试试这个。

现场演示here

<强> HTML

    <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 sqgreen"></div>
            <div class = "square sqgreen"></div>
            <div class = "square sqgreen"></div>
        </div>
    </div>

<强> CSS

 .square{
    width: 150px;
    height: 150px;
    padding: 5px !important;
    text-align: center;
    display: inline-block;
    position: relative;
    float:left;
    border:2px dotted red;
    margin:5px;
}

.sqgreen{
    border:4px dotted green !important;
}

.fix_width650px
{
    width:650px;
}

Answer 4

你不能，因为section-loaded box的形状总是长方形，而你想在你的section-toload square内注入任意位置。

你可以只用正方形点，或者如果你需要部分，将每个正方形封装在一个部分中，如下所示：

现场演示：http://jsfiddle.net/2QLmJ/

HTML

<div class="fix_width650px">
    <div class="section loaded">
        <div class = "square"></div>
    </div>
    <div class="section loaded">
        <div class = "square"></div>
    </div>
    <div class="section loaded">
        <div class = "square"></div>
    </div>
    <div class="section loaded">
        <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;
    border: 1px solid #000;
}

.toload .square{
    border: 1px solid red;    
}

.section{
    margin: 5px;
    display: inline-block;
    float: left;
}

Answer 5

如果你想要这样的东西。 enter image description here

.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>

Answer 6

从两个div中删除float-left并添加display:table-cell和vertical-align:bottom

.section-loaded{
    display: table-cell;

}

.section-toload{
    display: table-cell;
    position: relative;
    overflow: hidden;
    vertical-align:bottom

}

<强> DEMO

将div放在同一行

6 个答案: