CSS定位。 4 个 Div 同样 divided 并放入 1 个父 div

Question

必须有更简单的方法。

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 是 "Top Left"、"Top Right"、"Bottom Left" 和 "Bottom Right"。

Answer 1

将每个容器设置为 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>

https://jsfiddle.net/908ugcwh/

Answer 2

您可以在主容器上使用 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>

Answer 3

我会这样设计：

<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>

试一试。干杯。

CSS定位。 4 个 Div 同样 divided 并放入 1 个父 div

CSS Positioning. 4 Divs equally divided and placed into 1 parent div

html

css

user-interface

positioning