javascript - 将 div 放在同一行

Question

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

}

Answer 1

如果您将部分设置为浮点数，将正方形设置为浮点数，它将起作用。

只有你需要的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

试试这个。

现场演示在这里

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

如果你想要这样的东西。

.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

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

.section-loaded{
    display: table-cell;

}

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

}

演示