重疊的css矩形

因此，我的目標是創建5個彼此相鄰的矩形，無論您如何重新調整瀏覽器大小，它都以左，右，上，下居中。重疊的css矩形

<body> 
    <div id="test1"></div> 
    <div id="test2"></div> 
    <div id="test3"></div> 
    <div id="test4"></div> 
    <div id="test5"></div> 
</body> 

#test1 { 
    background-color:blue; 
    width:200px; 
    height:40px; 
    margin:auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
    float:left; 
} 

#test2 { 
    background-color:black; 
    width:200px; 
    height:40px; 
    margin:auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 25%; 
    float:left; 
} 

#test3 { 
    background-color:gray; 
    width:200px; 
    height:40px; 
    margin:auto; 
    position: absolute; 
    top: 0; left: 25%; bottom: 0; right: 0; 
    float:left; 
} 

#test4 { 
    background-color:yellow; 
    width:200px; 
    height:40px; 
    margin:auto; 
    position: absolute; 
    top: 0; left: 50%; bottom: 0; right: 0; 
    float:left; 
} 
#test5{ 
    background-color:orange; 
    width:200px; 
    height:40px; 
    margin:auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 50%; 
    float:left; 
}

這是我到目前爲止的代碼，它幾乎可行。但矩形在某個瀏覽器窗口寬度處開始重疊。我認爲它可以將寬度更改爲每個矩形的百分比，但是如果它們都處於相同的百分比，則它們只是彼此重疊。預先感謝希望有人能幫助我更多地理解這一點。

What it looks like with maximized browser

What I wand to avoid when the browser gets too small

來源

2014-01-14 user3195984

永遠不要將'float'與'position：absolute'結合起來 - 這是無稽之談。 –

忘記刪除這些行後，我發現了。沒有改變任何東西，這可能是我忘了的原因。固定。 – user3195984

如果你給它們絕對的寬度和高度，你的元素將會重疊。你必須給他們最小寬度/最大寬度和類似的東西。我會建議將所有寬度更改爲最大寬度，併爲您的所有元素提供一個百分比。 – ntgCleaner

這裏是一個展示fiddle我的解決方案。基本上，我爲你的盒子添加了一個容器，居中，然後將盒子設置爲容器寬度的20％。

的HTML：

<body> 
    <div id="container"> 
     <div id="test1"></div> 
     <div id="test2"></div> 
     <div id="test3"></div> 
     <div id="test4"></div> 
     <div id="test5"></div> 
    </div> 
</body>

的CSS：

#container{ 
    width: 80%; 
    position:fixed; 
    top:45%; 
    left:10%; 
    padding: 0; 
    height: 40px; 
} 
#test1 { 
    background-color:blue; 
    width:20%; 
    height:40px; 
    margin:auto; 
    float:left; 
} 
#test2 { 
    background-color:black; 
    width:20%; 
    height:40px; 
    margin:auto; 
    float:left; 
} 
#test3 { 
    background-color:gray; 
    width:20%; 
    height:40px; 
    margin:auto; 
    float:left; 
} 
#test4 { 
    background-color:yellow; 
    width:20%; 
    height:40px; 
    margin:auto; 
    float:left; 
} 
#test5{ 
    background-color:orange; 
    width:20%; 
    height:40px; 
    margin:auto; 
    float:left; 
}

來源

2014-01-14 22:56:04 zsaat14

這很好，我將如何在每個人之間添加一個設置空間？ – user3195984

嘗試將寬度和邊距一起調度20％寬度：http://jsfiddle.net/dF48g/9/或http://jsfiddle.net/dF48g/10/ –

讓我先從working fiddle，解釋如下：

首先，包裝你的div在主div，爲了簡單起見，我給了所有的孩子div一個普通的類：

<div id="main"> 
    <div class = "box" id = "test1"> 
    </div> 

    <div class = "box" id = "test2"> 
    </div> 

    <div class = "box" id = "test3"> 
    </div> 

    <div class = "box" id = "test4"> 
    </div> 

    <div class = "box" id = "test5">  
    </div>  
</div>

現在我們需要的主要DIV做兩件事情，第一，100％的寬度，第二，具有相同的高度，寬度，所以我們增加了下面的CSS：

#main { 
    width: 100%; 
    position: relative; /* for absolutely positioned children */ 
} 

#main:before { 
    content: ""; 
    display: block; 
    padding-top: 100%; /* 1:1 ratio */ 
}

然後我們給普通樣式的箱子：

.box { 
    width: 33%; 
    height: 33%; 
    position: absolute; 
    margin: auto; 
}

現在我們成立了子元素（我可能會改變顏色，哎呀呀）

#test1{ 
    background-color: blue; 
    left: 0; 
    right: 0; 
    top: 0; 
} 

#test2{ 
    background-color: black; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
} 
#test3{ 
    background-color: green; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 
#test4{ 
    background-color: red; 
    left: 0; 
    top: 0; 
    bottom: 0; 
} 
#test5{ 
    background-color: purple; 
    right: 0; 
    top: 0; 
    bottom: 0; 
}

然後你去，玩得開心。

來源

2014-01-14 22:56:23

重疊的css矩形

回答

相關問題