將固定邊距添加到響應網格

這是我製作的響應式網格。我想在所有元素周圍添加10px的邊距。我需要這些邊距始終保持相同的寬度。但是應用利潤率打破了電網的響應方面。我需要利潤率來「擠壓」div而不是「推」它。將固定邊距添加到響應網格

.wrapper { 
 
    margin: 0 auto; 
 
    max-width: 940px; 
 
    background: #EBEBEB; 
 
} 
 

 
.ideas__gallery__h3 { 
 
    color: #333; 
 
    font-weight: bold; 
 
    font-size: 22px; 
 
    text-align: center; 
 
    margin-bottom: 34px; 
 
} 
 

 
.one { 
 
    width: 33.3333333333333333%; 
 
    height: 310px; 
 
    background: lightblue; 
 
    float: left; 
 
} 
 

 
.two { 
 
    width: 33.3333333333333333%; 
 
    height: 310px; 
 
    background: lightpink; 
 
    float: left; 
 
} 
 

 
.three { 
 
    width: 33.3333333333333333%; 
 
    height: 310px; 
 
    background: lightyellow; 
 
    float: left; 
 
} 
 

 
.four { 
 
    width: 33.3333333333333333%; 
 
    height: 310px; 
 
    background: lightcyan; 
 
    float: left; 
 
} 
 

 
.five { 
 
    width: 66.6666666666666666%; 
 
    height: 310px; 
 
    background: lightgreen; 
 
    float: left; 
 
} 
 

 
.six { 
 
    width: 66.6666666666666666%; 
 
    height: 310px; 
 
    background: lightskyblue; 
 
    float: left; 
 
} 
 

 
.seven { 
 
    width: 33.3333333333333333%; 
 
    height: 310px; 
 
    background: lightgoldenrodyellow; 
 
    float: left; 
 
}

<div class="wrapper"> 
 
    <div class="ideas__gallery"> 
 
    <h3 class="ideas__gallery__h3">Headline</h3> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
    <div class="three"></div> 
 
    <div class="four"></div> 
 
    <div class="five"></div> 
 
    <div class="six"></div> 
 
    <div class="seven"></div> 
 
    </div> 
 
</div>

來源

2015-10-29 Artem Z

您可以使用calc從width刪除margin。這意味着margin將不再使div s超過容器的width，迫使他們進入新的生產線。

下面的改變是必需的：

添加新的規則.ideas__gallery div與margin: 10px;。這將margin添加到所有孩子div S的.ideas__gallery
修改每個div S的的width使用calc從計算width

.wrapper { 
 
    margin: 0 auto; 
 
    max-width: 940px; 
 
    background: #EBEBEB; 
 
} 
 

 
.ideas__gallery__h3 { 
 
    color: #333; 
 
    font-weight: bold; 
 
    font-size: 22px; 
 
    text-align: center; 
 
    margin-bottom: 34px; 
 
} 
 

 
.ideas__gallery div { 
 
    margin: 10px; 
 
} 
 

 
.one { 
 
    width: calc(33.3333333333333333% - 20px); 
 
    height: 310px; 
 
    background: lightblue; 
 
    float: left; 
 
} 
 

 
.two { 
 
    width: calc(33.3333333333333333% - 20px); 
 
    height: 310px; 
 
    background: lightpink; 
 
    float: left; 
 
} 
 

 
.three { 
 
    width: calc(33.3333333333333333% - 20px); 
 
    height: 310px; 
 
    background: lightyellow; 
 
    float: left; 
 
} 
 

 
.four { 
 
    width: calc(33.3333333333333333% - 20px); 
 
    height: 310px; 
 
    background: lightcyan; 
 
    float: left; 
 
} 
 

 
.five { 
 
    width: calc(66.6666666666666666% - 20px); 
 
    height: 310px; 
 
    background: lightgreen; 
 
    float: left; 
 
} 
 

 
.six { 
 
    width: calc(66.6666666666666666% - 20px); 
 
    height: 310px; 
 
    background: lightskyblue; 
 
    float: left; 
 
} 
 

 
.seven { 
 
    width: calc(33.3333333333333333% - 20px); 
 
    height: 310px; 
 
    background: lightgoldenrodyellow; 
 
    float: left; 
 
}

<div class="wrapper"> 
 
    <div class="ideas__gallery"> 
 
    <h3 class="ideas__gallery__h3">Headline</h3> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
    <div class="three"></div> 
 
    <div class="four"></div> 
 
    <div class="five"></div> 
 
    <div class="six"></div> 
 
    <div class="seven"></div> 
 
    </div> 
 
</div>

刪除 margin

來源

2015-10-29 14:53:21

您CA使用css calc。 Jsfiddle

.one, .two, .three 
{ 
    margin: 10px; 
    width:calc(33.3333333333333333% - 20px); 
}

來源

2015-10-29 14:53:09 Alex

將固定邊距添加到響應網格

回答

相關問題