在同一行

Question

放置的div我有2周的div。一個有N個正方形，另一個有一個正方形。我希望所有的方格都應該內聯。即，股利平方「部分加載的」進來3個線條和半第四線，一個「部分的對負載」另一個，則平方後應該來在相同的第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

試試這個。

現場演示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 2

它的工作，如果你不是設置部分作爲浮動，三角板爲浮動。

只有CSS，你需要：

.square { 寬度：150像素; 高度：150像素; float：left; }

Answer 3

我不認爲你可以這樣做。 作爲「相間螺旋纏繞製成加載」正在超過1線，這意味着該部分的寬度爲100％和任何下一個是推移新行即「部分的對負載」的推移新行。

你可以做什麼都廣場的一個部分，並應用「裝」，如果他們被加載和類的對負載「，他們是要加載額外的類。

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

如果你想

這樣的事情。

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

從兩個的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

Answer 6

你不能，因爲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; 
}