html - float div 边框不重叠

Question

我正在尝试仅使用 HTML 和 CSS 创建以下内容。

• 每个矩形都是 50px x 100px 和 100px x 50px。
• RGB 分别是#ffffff、#cccccc、#999999、#666666、# 333333，订单没有事情。
• 边框为 1px，颜色为 #000000。
• 将产品放在页面的中心。

到目前为止我有什么

<section id="main">
    <div id="container">
        <div class="horizontal" id="box1">1</div>
        <div class="vertical" id="box2">2</div>
        <div class="vertical" id="box3">3</div>
        <div class="horizontal" id="box4">4</div>
    </div>    
</section>

CSS

* {
    margin:0px auto;        
}    
#main {
    height:100%;
    width:100%;
    margin-top:20%;     
}    
#container {
    background-color:#ff0000;
    height:153px;
    max-width:154px;  
}    
.horizontal {
    border:1px solid #000000;
    width:100px;
    height:50px;
    margin:0px;
    padding:0px;
}    
.vertical {
    border:1px solid #000000;
    width:50px;
    height:100px;
    margin:0px;
    padding:0px;
}    
#box1 {
    float:left;
    background-color:#ffffff;
    margin:0px;
    padding:0px;
}    
#box2 {
    float:right;
    background-color:#cccccc;
    clear:right;
    margin:0px;
    padding:0px;
}
#box3 {
    float:left;
    background-color:#999999;
    margin:0px;
    padding:0px;
    clear:left;     
}
#box4 {    
    background-color:#666666;
    float:left;    
    margin:0px;
    padding:0px;    
}

我的问题在于使它成为一个精确的正方形并且边框重叠，因此它们只有 1px。同样，当我缩小底部 div 时，它会落在容器之外。

有人想试一试吗？

* 点赞 *

___________________________________
|                       |         |
|                       |         |
|                       |         |
|-----------------------|         |
|       |               |         |
|       |               |         |
|       |               |         |
|       |               |         |
|       |               |         |
|       |               |         |
|       |_______________|_________|
|       |                         |
|       |                         |
|       |                         |
-----------------------------------

Answer 1

你的边界将它推出。将边框设置为容器并将高度和宽度保留为 150px，因为在您发布的布局中应该使用 100x50 的矩形。清理了代码。

JSFiddle demonstration.

* {
    margin:0px auto;
}

#main {
    height:100%;
    width:100%;
    margin-top:20%;
}

#container {
    display: block;
    border: 1px solid #000;
    background-color:#ff0000;
    height:150px;
    width:150px;
}

.horizontal {
    width:100px;
    height:50px;
}

.vertical {
    width:50px;
    height:100px;
}

#box1 {
    background-color:#ffffff
}

#box2 {
    background-color:#cccccc;
}

#box3 {
    background-color:#999999;
}

#box4 {
    background-color:#666666
}

#box1, #box3 {
    float: left;
}

#box2, #box4 {
    float: right;
}