如何將div彼此相鄰放置在一起？

這可能是一個愚蠢的問題，它很容易解決，但我很難這樣做。我的問題是，如何將最後兩個部分（圖中所示）放在第一個部分的下面？如何將div彼此相鄰放置在一起？

http://imageshack.us/photo/my-images/829/63128947.jpg/

這是我的代碼：

#main_div{ 
display: -webkit-box; 
-webkit-box-orient: horizontal; 
border: 1px solid black; 
max-width: 1000px; 
} 

#main_section{ 
width: 600px; 
height: 450px; 
border: 1px solid black; 
padding: 5px; 
margin: 10px; 
} 

#sub_section1{ 
width: 100px; 
height: 200px; 
border: 1px solid black; 
padding: 5px; 
margin: 10px; 
-webkit-box-flex: 1; 
} 

#sub_section2{ 
width: 100px; 
height: 200px; 
border: 1px solid black; 
padding: 5px; 
margin: 10px; 
-webkit-box-flex: 1; 
} 

#sub_section3{ 
width: 100px; 
height: 200px; 
border: 1px solid black; 
padding: 5px; 
margin: 10px; 
-webkit-box-flex: 1; 
} 

#sub_section4{ 
width: 100px; 
height: 200px; 
border: 1px solid black; 
padding: 5px; 
margin: 10px; 
-webkit-box-flex: 1; 
}

來源

2013-02-15 Adam Miszczak

使用'浮動：left'裏面'＃main_div'和的所有元素限制'＃main_div'到沒有足夠的空間用於這兩個，那麼他們將包裝到下一行。另一種選擇是使用'nnth-child'僞選擇器，而不是通過ID選擇。 – crush 2013-02-15 20:44:57

閱讀此：http：//www.amazon.com/Head-First-HTML5-Programming-JavaScript/dp/1449390544這是一個很快和更容易得到一個良好的HTML基礎，而不是保持撞你的頭撞牆和這樣學習。 – 2014-01-12 03:14:30

Here's a fiddle演示做到這一點的方法之一。我只是添加了另一個div元素（我稱之爲「側邊欄」），並將較小的div放入其中。每個元素都是浮動的，並且側邊欄容器的寬度足夠寬以包含這些元素。您可能需要在小提琴中調整視口的大小，以便在屏幕截圖中顯示內容。

由於您的較小的div元素都是相同的樣式，我選擇使用類而不是多個ID。這樣你就不會在你的CSS中不必要地重複規則。

另請注意，如果您遇到這種情況，也可能使用絕對定位來實現。在CSS中通常有多種處理方式。

來源

2013-02-15 20:54:36

謝謝，這工作。 – 2013-02-15 21:17:01

-1

我剛剛添加了一個conatining div層，並將它們稱爲section_top/bottom。由於div是塊元素，因此它應該將其他兩個向下推。我還清理了一些樣式:-)。

fiddle

代碼：

<html> 
    <head> 
     <style> 
      #main_div{ 
       display: -webkit-box; 
       -webkit-box-orient: horizontal; 
       border: 1px solid black; 
       max-width: 1000px; 
       padding: 5px; 
       margin: 10px; 
      } 

      #main_section{ 
       width: 600px; 
       height: 450px; 
       border: 1px solid black; 
      } 

      .subsection { 
       width: 100px; 
       height: 200px; 
       border: 1px solid black; 
       padding: 5px; 
       margin: 10px; 
       -webkit-box-flex: 1; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="main_div"> 
      <div id="main_section"> 

      </div> 
      <div id="section_top"> 
       <div id="sub_section1" class="subsection"> 

       </div> 
       <div id="sub_section2" class="subsection"> 

       </div> 
      </div> 
      <div id="section_bottom"> 
       <div id="sub_section3" class="subsection"> 

       </div> 
       <div id="sub_section4" class="subsection"> 

       </div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2013-02-15 21:00:27 CSilivestru

如何將div彼此相鄰放置在一起？

回答

相關問題