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樣式問題

回答

相關問題