響應DIVs 50％最大寬度

我不相信我正確地編碼。嘗試在父DIV內相互緊挨着的兩個DIV作出響應。兩者都應該是屏幕的50％，但我需要大約10px的餘量。我到目前爲止編碼的方式是否合理？響應DIVs 50％最大寬度

.box-container { 
 
\t width: 100%; 
 
\t height: 84px; 
 
\t margin: 0 auto; 
 
\t background-color:#ED3538; 
 
\t display:flex; 
 
} 
 

 
.box50-1, .box50-2 { 
 
\t padding: 15px; 
 
    background-color:#353535; 
 
    background: rgb(53, 53, 53); /* older browsers */ 
 
    background: rgba(53, 53, 53, 0.7); 
 
\t float: left; 
 
\t width: 45%; 
 
} 
 

 
.box50-1 { 
 
\t margin-right:5px; 
 
} 
 

 
.box50-2 { 
 
}

<div class="box-container"> 
 

 
\t <div class="box50-1"> 
 
\t \t <h3>This is a title 1</h3> 
 
     <p>Some text</p> 
 
\t </div> 
 

 
\t <div class="box50-2"> 
 
\t \t <h3>This is a tille 2</h3> 
 
     <p>Some text</p> 
 
\t </div> 
 
</div>

來源

2015-12-09 jaycss88

不，它不是，但你沒有問一個具體的問題。閱讀[問]並修復你的帖子 – Amit

所以一個規則追隨者，因爲我沒有正確地說我的問題。好的，謝謝你的幫助。 – jaycss88

這是我會怎麼做https://jsfiddle.net/quod8jfL/1/

使用calc(50% - 5px)所以無論div的是完全一樣的寬度，總會留下兩個之間的邊距10px的差距。

.box-container { 
    width: 100%; 
    height: 84px; 
    margin: 0 auto; 
    background-color:#ED3538; 
    display:flex; 
} 

.box50-1, .box50-2 { 
    padding: 15px; 
    background-color:#353535; 
    background: rgb(53, 53, 53); /* older browsers */ 
    background: rgba(53, 53, 53, 0.7); 
    float: left; 
    width: calc(50% - 5px); 
} 

.box50-1 { 
    margin-right: 10px; 
}

來源

2015-12-09 22:54:28

響應DIVs 50％最大寬度

回答

相關問題