3个相等宽度的div之间的边距（响应）

我有三个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>

来源

2016-10-02 Pavan Kumar

你能更清楚一点你想要什么吗？只有在垂直对齐的情况下，只有在水平对齐等情况下，才要求所有断点上的每个元素之间的间距相等。你也想要多大的间距？ – patrickhawley

对不起，如果我没有正确说明我的要求。 - 我想在所有断点处的元素间保持相等的间距。 - 对于我来说，任何间距的空间都可以，直到它们的行为与浏览器的宽度一致。 –

添加类到3分div的：DIV-1，DIV-2 DIV-3

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

这样你就可以按照您的要求为特定分辨率添加保证金。

来源

2016-10-03 06:26:00

非常感谢您的回复。相反，margin-bottom效果很好，但是当我尝试在div之间给出margin时，它们会绕到下一行。所以请让我知道一个出路。 –

3个相等宽度的div之间的边距（响应）

回答

相关问题