css - 努力在 CSS 中对齐 div

Question

我在 this fiddle 中显示了以下代码.

在我的一生中，我无法让他们按照我希望的方式对齐。通过查看代码很容易看出每个 div 的位置，但这里有更多帮助:

|  topLeft      |    topRight      |          |
 ----------------------------------|   right  |
| bottomLeft    |   bottomRight    |          |

请帮我解决这个问题!

Answer 1

例 1. 交换左边前面的右边位置:http://jsfiddle.net/pTDEX/1/

html:

<div class="top">
    <div class="topRight">
        topRight
    </div>
    <div class="topLeft">
        topLeft
    </div>
</div>

在左侧 float 框之后右侧 float 的框将位于框下方，然后位于右侧。

或者 ex 2. 将 float:right 换成 float:left:http://jsfiddle.net/pTDEX/3/

.topLeft {
  background: green;
  float: left;
  width: 300px;
  height: 80px;
} 
.topRight {
  background: gray;
  float: left;
  width: 100px;
  height: 80px;
}

它会使右边的框向左浮动，靠在左边的框上。有更多的可能性，但这都是关于理解 float 的作用，并尝试一下!

附带说明一下，您可以在指定固定 block 时安全地放弃 display: inline。