如何向右浮动两个元素以可视和语义方式维护相同的顺序？ [英] How to float two elements to the right maintaining the same order visually and semantically?

问题描述

如何将包装元素中的两个元素浮动到右侧，以可视和语义的方式保持元素的相同顺序？

  <风格> 
 .container {widht：200px; height：50px;背景：＃333; } 
 .container p {width：50px; height：50px;背景：＃f00; float：right;保证金：0; } 
< / style> 
< div class =container> 
< p class =a> Simon< / p> 
< p class =b>说< / p> 
< / div> 
  

渲染时，这将使内部元素按照说西蒙， http://jsbin.com/eravan/1/edit 。

解决方案

常见修正为：

添加辅助元素

 < style> 
 .container {width：200px; height：50px;背景：＃333; } 
 .container p {width：50px; height：50px;背景：＃f00;向左飘浮;保证金：0; } 
 .container .aux {float：right; } 
< / style> 
< div class =container> 
< div class =aux> 
< p class =a> Simon< / p> 
< p class =b>说< / p> 
< / div> 
< / div> 
  

http://jsbin.com/eravan/6/edit

这种方法的问题是冗余辅助元素本身。 / b>

与语义混淆

 < ;风格> 
 .container {width：200px; height：50px;背景：＃333; } 
 .container p {width：50px; height：50px;背景：＃f00; float：right;保证金：0; } 
< / style> 
< div class =container> 
< p class =b>说< / p> 
< p class =a> Simon< / p> 
< / div> 
  

http://jsbin.com/eravan/9/edit

这是最糟糕的解决方案，不幸的是， （ Ali Bassam评论直接证明了这一点）。

这些都不是正确的答案。

How to float two elements within a wrapper element to the right keeping the same order of the elements visually and semantically?

<style>
.container { widht: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

When rendered, this will make the inner elements appear in the order of "Says Simon", http://jsbin.com/eravan/1/edit.

解决方案

The common fixes are:

Adding auxiliary element

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: left; margin: 0; }
.container .aux { float: right; }
</style>
<div class="container">
    <div class="aux">
        <p class="a">Simon</p>
        <p class="b">Says</p>
    </div>
</div>

http://jsbin.com/eravan/6/edit

The problem with this approach is the redundant auxiliary element itself.

Messing with the semantics

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="b">Says</p>
    <p class="a">Simon</p>
</div>

http://jsbin.com/eravan/9/edit

This is the worst solution and, unfortunately, the most common as well (Ali Bassam comment directly below proves it).

Neither of these is the correct answer.

这篇关于如何向右浮动两个元素以可视和语义方式维护相同的顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！