居中三個div裏面一個更大，左右邊距相同

嗨堆棧溢出社區，我是一個初學者在css3/html5，我很掙扎因爲我不知道如何將三個div放在一個更大的像這個圖像中：居中三個div裏面一個更大，左右邊距相同

.wrapper{ 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: blue; 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
.wrapper:after{ 
 
    content:""; 
 
    display: block; 
 
    clear: both; 
 
    margin: 0 auto; 
 
} 
 

 
.sez{ 
 
    width: 340px; 
 
    height: 240px; 
 
    float: left; 
 
} 
 

 
.sez1{ 
 
    background-color:green; 
 
} 
 

 
.sez2{ 
 
    background-color:red; 
 
} 
 

 
.sez3{ 
 
    background-color:pink; 
 
}

<div class="wrapper"> 
 
    <div class="sez sez1"></div> 
 
    <div class="sez sez2"></div> 
 
    <div class="sez sez3"></div> 
 
</div>

這是完整的HTML代碼： pastebin.com/GT0a6ztG

這是完整的CSS代碼： pastebin.com/7dYuz3cC

來源

2016-03-02 An00bi

感謝所有的答案！我解決了我的問題。我從來沒有關於「Flexbox」的紅色，我即將閱讀所有可以找到的信息：D 再次感謝你們！ – An00bi

有不同的方式。這是其中之一。

其他人的答案是很好的解決方案，但他們不適合你的情況。

您需要刪除這片CSS的：

.wrapper:after{ 
    content:""; display: block; clear: both; margin: 0 auto; 
}

演示

.wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: blue; 
 
    padding: 20px; 
 
    text-align: center; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
} 
 

 
.sez { 
 
    width: 30%; 
 
    height: 240px; 
 
} 
 

 
.sez1 { 
 
    background-color: green; 
 
} 
 

 
.sez2 { 
 
    background-color: red; 
 
} 
 

 
.sez3 { 
 
    background-color: pink; 
 
}

<div class="wrapper"> 
 
    <div class="sez sez1"></div> 
 
    <div class="sez sez2"></div> 
 
    <div class="sez sez3"></div> 
 
</div>

來源

2016-03-02 11:18:03 NiZa

您可以使用Flexbox

.wrapper { 
 
    border: 1px solid black; 
 
    justify-content: space-around; 
 
    display: flex; 
 
    padding: 10px; 
 
} 
 

 
.box { 
 
    height: 100px; 
 
    background: red; 
 
    width: 100px; 
 
}

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

來源

2016-03-02 11:12:58

您可以通過Flexbox輕鬆實現。

.wrapper { 
    display: flex; 
    justify-content: space-around; 
}

規則justify-content: space-around;將均勻分佈的子元素的父元素，.wrapper內，並將應用之間和身邊的間距相等。

根據您的瀏覽器支持需求，您可能需要添加前綴或不同的語法。

檢查CSS-Tricks guide to Flexbox爲優秀的指導。

來源

2016-03-02 11:13:07

另一種解決方案，跨瀏覽器。甲Parent與Margin: Auto寬度Fixed Width

#sez { 
    width: 1020px; 
    margin: auto; 
}

JSFiddle

來源

2016-03-02 11:16:14 Pedram

您可以:last-of-type實現這一目標：

.wrapper { 
 
    background-color: #ff0; 
 
    margin: 0 auto; 
 
} 
 

 
.column { 
 
    background-color: #000; 
 
    float: left; 
 
    margin-right: 2%; 
 
    width: 32%; 
 
} 
 

 
.column:last-of-type { 
 
    margin-right: 0; 
 
} 
 

 
p { 
 
    color: #fff; 
 
}

<div class="wrapper"> 
 

 
    <div class="column"> 
 
    <p>1</p> 
 
    </div> 
 

 
    <div class="column"> 
 
    <p>2</p> 
 
    </div> 
 

 
    <div class="column"> 
 
    <p>3</p> 
 
    </div> 
 

 
</div>

來源

2016-03-02 11:23:55

居中三個div裏面一個更大，左右邊距相同

回答

相關問題