2016-10-02 73 views
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>

+0

你能更清楚一點你想要什麼嗎?只有在垂直對齊的情況下,只有在水平對齊等情況下,纔要求所有斷點上的每個元素之間的間距相等。你也想要多大的間距? – patrickhawley

+0

對不起,如果我沒有正確說明我的要求。 - 我想在所有斷點處的元素間保持相等的間距。 - 對於我來說,任何間距的空間都可以,直到它們的行爲與瀏覽器的寬度一致。 –

回答

1

添加類到3分div的:DIV-1,DIV-2 DIV-3

@media only screen and (max-width:766px) { 
    .div-1.div-2.div-3 { 
     margin-bottom: 10px; 
    } 
} 

這樣你就可以按照您的要求爲特定分辨率添加保證金。

+0

非常感謝您的回覆。相反,margin-bottom效果很好,但是當我嘗試在div之間給出margin時,它們會繞到下一行。所以請讓我知道一個出路。 –