CSS-如何將div並排放置，左右之間沒有空格

Question

我有一個有多個子div的父div，我想使子div每行並排浮動4。

浮動規則必須：

1. 每個子div的寬度相同。
2. 每行4個子div。
3. 每一行的左側和右側都必須使用wrapper（0px /無空格）關閉，如下圖所示。
4. 每個子div之間的每一行必須有一個空格，並且大小必須相同，如下圖所示。

通過使用css / css3可以做到嗎？ 對不起我的英語不好。

Answer 1

使用CSS3，這相對容易一些：使用box-sizing: border-box; ，子div的寬度將包括填充（例如20px ）和邊框，並且可以設置為主體寬度的25％。 給父div（包裝器）一個負的右邊距，以隱藏最右邊的空間。 由於存在額外的空間，滾動條將出現在主體上，可以用overflow-x: hidden;該滾動條overflow-x: hidden; 。

 body { margin: 0; padding: 0; overflow-x: hidden; } .wrapper { margin-right: -20px; } .child { box-sizing: border-box; width: 25%; padding-right: 20px; float: left; } .child p { background: lime; } 

 <p>Content</p> <div class="wrapper"> <div class="child"><p>Child</p></div> <div class="child"><p>Child</p></div> <div class="child"><p>Child</p></div> <div class="child"><p>Child</p></div> </div> <p>Content</p> 

Answer 2

這里有一些很好的例子，但是我總是想看看一種使圖像與文本對齊的方法。 為此，我一直在使用頁面包裝紙和圖像包裝紙，其邊距為負（以使其與文本不對齊）。 然后，將相同的值用作正填充值后，圖像將與文本完美對齊。

#pagewrapper {
    width: 500px;
    background: green;
    overflow: hidden;
}

#imagewrapper {
    width: auto;
    margin: 0 -12px; /* negative margin to keep images aligned with text, same as margin below */
    background: blue;
}

.image {
    box-sizing: border-box;
    width: 25%;
    padding: 0 12px;
    margin: 0;
    height: 200px;
    background: red;
    float: left;
    overflow: hidden;
}

小提琴

Answer 3

剛剛看到，@ user2782378答案..我想我應該通過給出我的答案來詳細說明一下：

div{float:left;width:20%;background:black;height:100px;margin:1px;}

小提琴的例子

為了研究使用的css：

W3Schools的

Answer 4

嘗試使用display:inline-block按比例修改子div的寬度

.outer_div{
  display:inline-block;
  max-width:800px;
  height:300px;
  background-color:red;
  overflow:auto;
}
.inner_div{
  width:200px;
  height:100px;
  background-color:black;
  float:left;
}

Answer 5

也許這種純CSS2解決方案是更可取的。

div是默認為頁面寬度的塊元素。 如果給包裝div的右邊距為內部div的邊距的三倍，則包裝寬度的25％就是內部div的寬度。 通過相對位置調整內部div的位置：

 html, body { margin: 0; padding: 0; } .wrapper { margin-right: 30px; } .wrapper div { width: 25%; float: left; position: relative; background: lime; /* demo setting */ height: 100px; /* demo setting */ } .wrapper div+div { left: 10px; } .wrapper div+div+div { left: 20px; } .wrapper div+div+div+div { left: 30px; } 

 <div class="wrapper"> <div></div> <div></div> <div></div> <div></div> </div> 

Answer 6

嘗試這個..

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with abality to provide width/height
}​

• 具有保證金：0自動； 以及寬度：100％是無用的，因為您的元素會占用全部空間。

• float：left將元素左移，直到沒有空間，因此它們將換行。 使用display：inline-block可以內聯顯示元素，並提供尺寸（可忽略寬度/高度的內聯顯示）

演示