Question

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

每个矩形都是50px 100px和100px 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;
}

Answer 2

您无法按照自己的方式进行操作，因为边框会为尺寸添加像素。

你可以做的最接近的事情就是删除每个矩形的一边，否则会加倍like this，但容器仍然必须是153px 153px因为你每边有边框，两边有一边

使用负边距与上述修复相同，但使用该方法仍然无法获得150x150像素

使用outline代替你可以靠近，但你无法删除大纲的一部分so it's not perfect

这将为您提供以下选项（除了上面链接的选项），以获得完美的150x150总框：

如果你只需要一个外围的边界，那就像RDrazard说的那样并将边界应用到#container

Answer 3

我做到了这一点并且有效：

HTML

<div id="container">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>    
</div>

的CSS：

* {
    padding: 0;
    margin: 0;
}

#container {
    border: 1px dotted green;
    width: 250px;
    height: 250px;
    margin: 30px auto;
    background: red;
}

#div1 {
    background: #fff;
    float: left;
    width: 60%;
    height: 30%;
}

#div2 {
    background: #333;
    float: right;
    width: 40%;
    height: 70%;
}

#div3 {
    background: #555;
    float: left;
    width: 40%;
    height: 70%;
}

#div4 {
    background: #999;
    float: right;
    width: 60%;
    height: 30%;
}

跟随小提琴：
http://jsfiddle.net/637R9/

Answer 4

http://jsfiddle.net/ku9bf/1/

使用负边距，例如：

#box3 { margin-top: -1px; }

并将容器的最大宽度减少1px。

Answer 5

div从容器中掉出来是预期的行为，因为你正在制作一个浮动div。当屏幕尺寸增大时，div必然会挤出容器。

浮动divs边框不重叠

5 个答案: