Question

HTML

<div>
    <div class="leftInRow5050 squareTopLeft">1</div>
    <div class="rightInRow5050 squareTopRight">2</div>
    <div style="clear: both;"></div>
</div>
<div>
    <div class="leftInRow5050 squareBottomLeft">3</div>
    <div class="rightInRow5050 squareBottomRight">4</div>
    <div style="clear: both;"></div>
</div>

CSS

.rightInRow5050{
    width:50%;
    display: inline-block;
    float:right;
}

.leftInRow5050{
    width:50%;
    display: inline-block;
    float:left;
}
.leftInRow5050.squareTopLeft{
    height: 35%;
        border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

.rightInRow5050.squareTopRight{
    height: 35%;
    border-left: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

.leftInRow5050.squareBottomLeft{
    height: 35%;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;  
}

.rightInRow5050.squareBottomRight{
    height: 35%;
    border-left: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;  
}

为什么上面的代码无法创建2X2 <div>矩阵？它给了我标准的1px问题，其中<div>是否属于彼此？

Answer 1

如果div有边框，那就是把它扔掉，试试这个：

box-sizing:border-box;

Answer 2

您需要为正确的div设置宽度和浮动。见Demo

.leftInRow5050 {
    width:50%;
    float:left;

}
.rightInRow5050 {
    width:50%;
    float:right; /* or left */

}

编辑添加：代码示例在我回答时发生了变化：p

CSS浮动清除两个50％宽度Div与边框

2 个答案: