分隔符不使用寬度破解

Question

我經常做寬度破解49％和邊界1px做2列的分隔符。它的工作，就像下面的演示。但是有沒有更好的方法來做到這一點？我想避免這個49％的黑客攻擊，因爲當視口縮小到更大或更小的尺寸時，很明顯，設計會中斷。

body{ 
 
    margin:0; 
 
} 
 
.left { 
 
    background: #eee; 
 
    float: left; 
 
    width: 49%; 
 
    border-right:1px solid #333; 
 
} 
 
.right { 
 
    background: #eee; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
img { 
 
    margin: 0 auto; 
 
    display: block; 
 
    width: 44px; 
 
    padding: 5px 0; 
 
}

<div class="navigate" style="width: 170px;"> 
 
    <div class="left"> 
 
     <img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png"> 
 
    </div> 
 
    <div class="right"> 
 
     <img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png"> 
 
    </div> 
 
</div>

Answer 1

您可以使用box-sizing

CSS

body { 
    margin:0; 
} 
.left { 
    background: #eee; 
    float: left; 
    width: 50%; 
    border-right:1px solid #333; 
    box-sizing:border-box; 
} 
.right { 
    background: #eee; 
    float: right; 
    width: 50%; 
} 
img { 
    margin: 0 auto; 
    display: block; 
    width: 44px; 
    padding: 5px 0; 
} 

HTML

<div class="navigate" style="width: 170px;"> 
    <div class="left"> 
     <img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png"> 
    </div> 
    <div class="right"> 
     <img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png"> 
    </div> 
</div> 

DEMO HERE