必须有一个更简单的方法。
div {
border: 2px solid black;
}
#main {
width: 107px;
height: 107px;
padding: 0;
text-align: center;
font-size: 10px;
}
#tl, #tr, #bl, #br {
position: relative;
width: 45px;
height: 45px;
}
#tl {
top: 3px;
left: 3px;
}
#tr {
top: -46px;
left: 55px;
}
#bl {
left: 3px;
top: -43px;
}
#br {
top: -92px;
left: 55px;
}<body>
<div id="main">
<div id="tl">Top Left</div>
<div id="tr">Top Right</div>
<div id="bl">Bottom Left</div>
<div id="br">Bottom Right</div>
</div>
</body>有什么建议？我仍然在尝试学习更好的样式，以便在我的网络应用程序上构建更好的GUI。
我只想将这四个div放在一个父div容器中。四个div是“左上”，“右上”，“左下”和“右下”。
你可以在主要容器上使用display:flex;和flex-wrap:wrap;，在孩子们身上使用margin:auto
div {
border: 2px solid black;
box-sizing:border-box;/* switch box model to integrate padding and borders into size */
}
#main {
width: 107px;
height: 107px;
padding: 2px; /*eventually*/
text-align: center;
font-size: 10px;
display:flex;
flex-wrap:wrap;
/* show me */
background:linear-gradient(to left,rgba(0,0,0,0.25) 50%, transparent 50%),linear-gradient(to top,rgba(0,0,0,0.25) 50%, transparent 50%);
}
#tl, #tr, #bl, #br {
width: 45px;
height: 45px;
margin:auto;
}<body>
<div id="main">
<div id="tl">Top Left</div>
<div id="tr">Top Right</div>
<div id="bl">Bottom Left</div>
<div id="br">Bottom Right</div>
</div>
</body>将每个容器设置为50％，并将它们并排浮动......
<div style="width: 500px;">
<div style="width: 50%; float: left; background-color: red;">1</div>
<div style="width: 50%; float: left; background-color: green;">2</div>
<div style="width: 50%; float: left; background-color: orange;">3</div>
<div style="width: 50%; float: left; background-color: pink;">4</div>
</div>
我会这样做的样式：
<style>
div {
border: 2px solid black;
}
#main {
width: 107px;
height: 107px;
padding: 0;
text-align: center;
font-size: 10px;
}
#tl, #tr, #bl, #br {
width: 45px;
height: 45px;
margin-top:3px;
margin-left:3px;
float:left;
}
#bl, #br {
margin-bottom:3px;
}
</style>
试试看。干杯。