CSS的float清除這兩個邊境

-1

<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 50％的寬度股利

.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>的相互之間？

來源

2014-03-12 Aditya Kappagantula

你有沒有爲父div設置寬度 – anurupr

我沒有爲父div設置任何寬度。爲什麼要爲父div設置寬度？我相信身高不是問題。這裏只有寬度是問題。 –

你不斷地改變你的問題的代碼。所以只需對代碼做出決定 – anurupr

如果div的有一個邊界，那是什麼把它扔了，試試這個：

box-sizing:border-box;

來源

2014-03-12 11:34:42 Frankenscarf

完美！有效。如果您可以在箱子尺寸上投射更多光線，我將不勝感激。 –

@AdityaKappagantula [在此瞭解]（http://msdn.microsoft.com/en-us/library/ie/dd183522（v = vs.85）。aspx） – Ruddy

還記得這是'CSS3'屬性！ – Ruddy

您需要爲正確的div設置寬度和浮點數。看到這個Demo

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

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

}

編輯補充：代碼示例改變，而我回答：P

來源

2014-03-12 11:27:24 Ted

CSS的float清除這兩個邊境

回答

相關問題