0
我有三個div等寬,第三個div擴展到斷點下面的全寬(991px是精確的),當瀏覽器寬度低於所有div時, 767px,現在我想要相等的利潤率(邊緣處的divs &),所以請讓我知道一個出路。我想在沒有任何框架的情況下實現這一點,我只需要藉助css。3個相等寬度的div之間的邊距(響應)
下面的代碼:
* {
box-sizing: border-box;
}
h1 {
margin: 25px;
text-align: center;
}
div[class|=col] {
position: relative;
margin-bottom: 10px;
border: 1px solid black;
}
html,
body {
margin: 15px;
}
.title {
border-left: 1px solid black;
border-bottom: 1px solid black;
width: 25%;
position: absolute;
top: 0px;
right: 0px;
color: black;
text-align: center;
}
#Title1 {
background-color: orange;
}
#Title2 {
background-color: white;
}
#Title3 {
background-color: green;
}
p {
background-color: gray;
width: 100%;
margin: 0px;
padding-left: 10px;
padding-right: 10px;
padding-top: 25px;
font-family: Helvetica;
color: black;
}
.row {
width: 100%;
}
<div class="row">
<div class="col-lg-4 col-md-6 ">
<section id="Title1" class="title">Chicken</section>
<p>Some text</p>
</div>
<div class="col-lg-4 col-md-6">
<section id="Title2" class="title">Beef</section>
<p>Some text</p>
</div>
<div class="col-lg-4 col-md-12">
<section id="Title3" class="title">Sushi</section>
<p>Some text</p>
</div>
</div>
你能更清楚一點你想要什麼嗎?只有在垂直對齊的情況下,只有在水平對齊等情況下,纔要求所有斷點上的每個元素之間的間距相等。你也想要多大的間距? – patrickhawley
對不起,如果我沒有正確說明我的要求。 - 我想在所有斷點處的元素間保持相等的間距。 - 對於我來說,任何間距的空間都可以,直到它們的行爲與瀏覽器的寬度一致。 –