分隔符不使用宽度破解

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