Question

我对以下代码有两个问题：

为什么不让两个正确的div向上移动，以便它们与内容div更加垂直对齐？
为什么＆＃34;最右边＆＃34; div不是一路都好吗？

CSS

.container {width:800px;}
* {border:1px solid black;}

HTML

<div class="container">
    <div>nav area</div>

<div style="width:500px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

<div style="float:right;width:100px;">
this is the side bar area
</div>
<div style="float:right;width:100px;">far right side</div>

<footer style="clear:both;">footer area</footer>
</div>

http://jsfiddle.net/n5xq9/

Answer 1

浮动元素的顺序很重要。将<div> 上面的两个float: right元素放置在上面的Lorem Ipsum内容<div>将使所有三个元素垂直对齐。
当多个元素float: right时，两个元素中的第一个将位于最右侧。如果您想要交换订单，请在文档中撤消其订单。如果您希望其中一个显示在另一个下方，请先排序较高的一个，然后将另一个设置为clear: right;

Answer 2

只需float-left所有元素：）

http://jsfiddle.net/n5xq9/4/

_{请注意，我还为第一个（dunno，如果需要）添加了一些保证金以复制您的演示和您的愿望}

Question 1.已修复:)
Question 2.它是浏览器从上到下读取文档的方式，对吧？现在想象一下，在我的例子中，所有都是 float: left （所以这里是一个要理解的伪代码）：

<div1> Float it left
<div2> Float left that one too

Results in the expected:
|div1||div2|
DIV1 was the first one to be floated left
DIV2 was the second one, and has to accommodate in the available floats

完全相同的原则适用于 float-right 元素。让我们看看为什么他们交换职位：

<div1> Float it right
<div2> Float right that one too

Results instead in
|div2||div1| cause logically:
DIV1 was the first one to float right
DIV2 was the second one. It has to stay cool and adjust to the available float

为什么侧边栏没有正确对齐？

2 个答案: