为什么要浮动：右边是一个“正常”的左对齐div？

<html> 
<head> 
    <style type="text/css"> 
     div, p {border: 1px dashed;} 
    </style> 
</head> 
<body> 

<!-- Why must the text that's intended to be right-justified *PRECEED* 
    the text that is to be left-justified? It "feels" like the syntax should 
    simply read from top to bottom: 

    <div> 
    "Put some text here" 
    "Then put some text here, but align it right" 
    </div> 

    Instead, this seems to work: 
    <div> 
    "The right-justified text has to go first" 
    "Then we code the 'normal' left-justified text" 
    </div> 

    I see how to 'make it work', but I'm curious as to the logic behind this 
    seemingly 'backwards' syntax. What am I misunderstanding? 
--> 

<div> 

    <!-- Does NOT work as intended --> 
    <div> 
     <p>I am on the Left</p> 
    </div> 

    <div style="float: right;"> 
     <p>I am on the RIGHT, but I don't align</p> 
    </div> 


    <br /> 
    <br /> 
    <br /> 


    <!-- Works as intended --> 
    <div style="float: right;"> 
     <p >I am on the RIGHT, and I mostly align</p> 
    </div> 

    <div> 
     <p class="">I am on the Left</p> 
    </div> 


</div> 

</body> 
</html>

来源

2011-09-06 Andrew

由于您混合了单词justify和float，因此很难理解您的问题。文字可以是正确的或左边的，divs不能。他们只能浮动。

除此之外，您的问题的答案与文档流程有关。我认为你所期望的是你将正确的浮动div放在正常的浮动div之后，并且它们并排结束。也就是说，您期望右浮动div能够“知道”您希望它与文档流中位于其上方的div并排。

但是为什么它应该知道？

也许你的意思是它与一个div进一步向上或向下延伸。正如你所看到的那样，它有点任意。如果有没有上面div浮动旁边会发生什么？

取而代之的是，将CSS放在一起的人们决定div会从文档float中出现的任何位置水平地浮动，在此时退出流程。因此，通过将正确的浮动div放在正常的div上方，可以告诉它从文档中的那一点开始浮动，并且其他所有内容都“向上移动”。

这有帮助吗？

来源

2011-09-06 16:58:18 Richard

Hi Richard。是的，你的回答确实有帮助。我错过了文档流如何呈现的概念。您的回复引起我以不同的方式回答这个问题，其中以下站点为我提供了另一个CSS难题：http://www.mako4css.com/TPos.htm和http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ – Andrew

很高兴听到它，@Andrew。祝你好运，继续网页设计！ – Richard

为什么要浮动：右边是一个“正常”的左对齐div？

回答

相关问题