Question

以下是我所描述的一个例子：

Valid XHTML http://www.freeimagehosting.net/uploads/515f6ffa67.png

Answer 1

实现您想要的简单方法：使用float:left为您工作

<div style="width:100%">
 <div style="width:100%">
   <div style="width:45%; float:left">  
      div1
   </div>
   <div style="width:45%; ">  
      div2
   </div>
 </div>
 <div style="width:100%">
   <div style="width:45%; float:left">  
      div3
   </div>
   <div style="width:45%; ">  
      div4
   </div>
 </div>      
</div>

Answer 2

使用float和margin解决您已经建议的rahul问题。要使2个浮点数彼此相邻，请使用width。

CSS：

.outer {
  border: 1px solid black;
  width: 100%;
  float: left;
}

.inner {
  margin: 10px;
  float:left;
  width:45%;
  border: 1px solid black;
}

HTML：

<div class="outer">
  <div class="inner">div</div>
  <div class="inner">div</div>
  <div class="inner">div</div>
  <div class="inner">div</div>
</div>

我使用了45％的花车宽度，以确保它们适合。由于margin，50％无效。我猜测45％可能会略微增加，但这取决于内部div的余量。

Answer 3

这可能是您的HTML：

<div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
</div>

这可能是你的CSS：

div {
    float: left; /* so the surrounding div takes only the size of its content */
    padding: 20px 0 0 20px; /* to get the same spacing everywhere */
    overflow: hidden; /* this is not needed but i like to use it because clients never do what they shoul :P */
    border: 4px solid black;
}

div > div {
    float: left; /* places the divs next to each other */
    width: 50px;
    height: 50px;
    margin: 0 20px 20px 0; /* makes the space between the divs */
    border: 4px solid black;
}

div > div:nth-child(3n) {
    clear: both; /* you want the 3rd div to start a new line */
}

这将是结果： http://jsfiddle.net/NgjaY/1/

Answer 4

如果您希望div并排，那么您可以使用float属性。如果你想在div之间分隔，那么你可以使用margin属性。

Answer 5

试试这段代码

<html>
<head>
<style type="text/css">
#main   {
    width:130px;
    padding:10px 0px 0px 0px;
    height:auto;
    overflow:hidden;
    background-color:#171817;
}

.div1   {
    width:50px;
    height:50px;
    float:left;
    display:inline;
    margin:0px 0px 10px 10px;
    background-color:white; 
}
</style>
</head>
<body>
<div id="main">
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
</div>
</body>
</html>

如何在div中有4个div，它们的大小相同且不连接在一起？

5 个答案: