如何将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彼此相邻放置在一起？

回答

相关问题