左浮动的div后右浮动DIV当宽度小

例子：http://jsfiddle.net/tkKth/左浮动的div后右浮动DIV当宽度小

当我调整我的窗口（设置.container {width:200px;}），左格出现在正确的DIV之后。有没有办法做到这一点与CSS，当divs左/右改变其在html文档中的位置？ - > <div class="left">Left div</div> <div class="right">Right div</div>

感谢

来源

2012-06-01 chaenu

我不明白你的问题。显然你有一个你想要的东西。什么是需要解决的问题？ – user1129682

@ user1129682：他希望它的行为完全像它已经做的那样，但他希望'.left'在HTML中的'.right'之前。通常的理由是“SEO目的”。 – thirtydot

我明白了。我没有注意到HTML中的div排序。那么，问题似乎是浏览器呈现内容的直观（TM）顺序。我没有发布这个答案，B/C我没有时间去尝试它，但可能会发挥作用的是将另一个div放在两个有问题的div上，并将方向设置为“rtl”。 – user1129682

几年以后，Flexbox将是很好的支持，所以这可以通过以下方式实现：

.container { 
    display: flex; 
} 

.left { 
    order: 2; 
} 

.right { 
    order: 1; 
}

来源

2017-07-25 22:01:02 chaenu

6on你的榜样http://jsfiddle.net/tkKth/正确的DIV是左

<div class="container"> 
<div class="right">Right div</div> 
<div class="left">Left div 
</div>

对你的问题是之前的其他方式

<div class="container"> 
<div class="left">Left div</div> 
<div class="right">Right div</div> 
</div>

如果。容器宽度为< =。左侧宽度为& 。如果左侧高度固定（例如36px），则可以使用具有最小设备宽度的媒体查询：如果屏幕低于600像素，并将其添加为.right，则首先投放第一个图像

top:36px; /* equivalent to .left height*/ 
position:absolute;

来源

2012-06-01 13:53:20 baptme

对不起，如果我没有解释清楚 - 我想要它的行为与jsfiddle中的.left在标记中的.right之前一样。 SEO的目的，正如@thirtydot所说。 – chaenu

是.left具有固定的高度？ – baptme

不幸的是 - 我在寻找最灵活的答案;）是的，这可能是一种可能性，谢谢你。 – chaenu

左浮动的div后右浮动DIV当宽度小

回答

相关问题