CSS div样式问题

这是什么适当的代码？CSS div样式问题

在格样式代码。我知道如何使用浮动，但只有2分。但在四分之一，我不知道。

来源

2010-04-21 Jorge

只需为每个格添加float: left。

来源

2010-04-21 16:09:37

浮动仍然可以用于任何数量的div，它们将排列在一起，直到它们填满容器的宽度，此时它们将开始换行到下一行。

来源

2010-04-21 16:09:11 Tesserex

只是float他们都left，并在必要时添加margin-1px的right使边界重叠很好。下面是一个SSCCE，只是copy'n'paste'n'run它：

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2684578</title> 
     <style> 
      .box { 
       float: left; 
       width: 100px; 
       height: 100px; 
       margin-right: -1px; 
       border: 1px solid black; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="box">box1</div> 
     <div class="box">box2</div> 
     <div class="box">box3</div> 
     <div class="box">box4</div> 
    </body> 
</html>

来源

2010-04-21 16:09:56 BalusC

只要身体足够宽以适应。 – 2010-04-21 16:11:16

非常感谢。 – Jorge 2010-04-21 16:34:44

另外，如果你不想让你的4个格换到下一行，当窗口被调整大小，你可以把你的4在父div内的div，并设置该父div的宽度。

这里是基于BalusC的代码以上的示例：

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2684578</title> 
     <style> 
      .box { 
       float: left; 
       width: 100px; 
       height: 100px; 
       margin-right: -1px; 
       border: 1px solid black; 
      } 
      .parent { 
       width: 404px; 
       height: 100px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="parent"> 
      <div class="box">box1</div> 
      <div class="box">box2</div> 
      <div class="box">box3</div> 
      <div class="box">box4</div> 
     </div> 
    </body> 
</html>

来源

2010-04-21 16:36:14

CSS div样式问题

回答

相关问题