將屏幕拆分爲四個象限，每個象限都有一個邊框

我已將屏幕分爲4個象限。將屏幕拆分爲四個象限，每個象限都有一個邊框

<html> 
    <head> 
     <link rel="stylesheet" href="test.css" /> 
    </head> 
    <body> 
     <div class="aqua pull-left"></div> 

     <div class="blue pull-right" ></div> 

     <div class="green pull-left bottom"></div> 

     <div class="tan pull-right bottom"></div> 
    </body> 
</html>

，這裏是我的CSS：

html, body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    min-height: 100%; 
    background: black; 
} 

div { 
    width: 50%; 
    height: 50%; 
} 

.pull-left { 
    float: left; 
} 

.pull-right { 
    float: right; 
}

我希望我的廣場每一個周圍的黑色邊框。當我添加一個邊框時，我的方塊垂直排列，同時在屏幕的左側和右側交替排列。我知道這是一個簡單的解決方案，但一直困擾它。任何幫助都會很棒。謝謝。

來源

2013-05-01 jhamm

是。邊框使div的總寬度超過50％。或者使它們略小於50％，或者如果瀏覽器支持，請使用[box-sizing]（http://www.w3.org/TR/css3-ui/#box-sizing0）屬性。 – 2013-05-01 09:34:27

邊框將額外的像素添加到div的寬度。如果border爲1px寬，則會在寬度上添加2px。您可以將div的寬度更改爲49％，或者儘可能將其寬度更改爲精確值，以使其按預期工作。 – filipko 2013-05-01 09:35:29

邊框會導致div元素的寬度增加，從而強制它們進入下一行。您可以通過在div上指定負數margin來計算邊框。

div { 
    width: 50%; 
    height: 50%; 
    border: 1px solid black; 
    margin: 0px -1px; 
}

工作實例http://jsfiddle.net/zB3zf/

來源

2013-05-01 09:34:50

這工作很好，但你爲什麼只在左右兩邊加上負值？爲什麼它不需要頂部和底部同樣的東西？ – jhamm 2013-05-01 09:39:43

由於頂部和底部不會強制新行上的quandrant，它們只會增加高度，所以象限的實際高度爲50％+ 1px。根據您的使用情況，您可能需要將負邊界調整到頂部和底部。 – 2013-05-01 09:41:50

如果你不擔心> IE7，盒子大小將是一個更好的解決方案。 http://css-tricks.com/box-sizing/ – gaynorvader 2013-05-01 10:02:21

我improove痘痘你的代碼，但是，你需要正是你需要的定義。

這裏是鏈接： http://jsfiddle.net/NMbbS/5/

的CSS：

html, body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    min-height: 100%; 
    background: black; 
} 

div { 
    width: 48%; 
    height: 50%; 
    border:1%; 
    border: solid #a1a1a1; 
} 

.pull-left { 
    float: left; 
} 

.pull-right { 
    float: right; 
}

來源

2013-05-01 09:37:38 Romain

將屏幕拆分爲四個象限，每個象限都有一個邊框

回答

相關問題