浮動div邊框不重疊

Question

我試圖創建以下使用HTML和CSS只。

• 每個矩形或者是通過50px和100px100px通過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的矩形一致。清理代碼。

​​

* { 
    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因爲你有邊界的兩個元素之間的兩側各一個

使用負利潤率做同樣的事情，上面的修復，但它仍然是不可能的使用方法

使用outline相反，你可以親近得到它150×150像素，但不能刪除的部分大綱so it's not perfect

這將使您以下選項（除了上面鏈接的除外），有一個完美的150×150總票房：

• Don't have a border at all
• Make the inner rectangles smaller

如果你只需要一個邊界在外面然後做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必然會擠出容器。