Question

所以我的目标是创建5个相邻的矩形，无论你如何重新调整浏览器的大小，它们都是左，右，上和下居中。

<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

Answer 1

这是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;
}

Answer 2

让我先从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;
}

现在我们设置子元素（我可能会更改颜色，oops）

#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;
}

然后你去，玩得开心。

重叠的css矩形

2 个答案: