左浮动div地方下另一个div [英] Left-floated div place below another div

问题描述

我有两个div，而（div 1）左边浮动，（div 2）浮动右边。我创建了一个响应式布局，当视口更改时，（div 1）将在（div 2）之下。我通过MS Paint创建了一个简单的图像，用于更简单的插图以及一些代码。此外，它们都包含动态内容，因此它们的高度不得固定。

没有javascript（如果可能）只是普通的CSS。我只知道如何把div 2放在div 1之下，而不是反过来。

有人知道我怎么能做到这一点吗？

HTML：

 < div id =div1 sidebarstyle =float：left;> 
 //动态内容
< / div> 
 
< div id =div2 contentstyle =float：right;> 
 //动态内容
< / div> 
  

HTML是自动生成的，因此在标记中，div1最初比div2先出现。不建议更改订单（将div2放在div1之上），因为许多页面使用相同的布局。见上面的代码

解决方案

这是我的主张。使用媒体查询，找到您希望您的 div 并排保持的最大宽度。

在您的html ，把你的 div 像这样（前面的那个）：

  < div class =div2> 
 div 2 
< / div> 
< div class =div1> 
 div 1 
< / div> 
  

用于显示 div 的css应该看起来像这样：

  .div1 {
 float：left; 
宽度：25％; 
} 
 .div2 {
 float：right; 
宽度：75％; 
} 
  

最后，显示您的左边 div 低于正确的一个，你应该在你的css里添加如下内容：

  @media all and（max- width：480px）{
 .div1，.div2 {
 float：none; 
 display：block; 
} 
} 
  

这里是一个jsfiddle，演示了这种编码。您只需调整浏览器的大小即可查看您的左侧 div 正确的右下角。

I have two divs whereas (div 1) is floated left while (div 2) is floated right. I am creating a responsive layout where when the viewport changes, (div 1) will go under (div 2). I created a simple image via MS Paint for an easier illustration and also some code. Also, both contain dynamic content so their heights must not be fixed.

No javascript (if possible) just plain CSS. I only know how to put div 2 under div 1 but not the other way around.

Does anyone know how I could achieve this?

HTML:

 <div id="div1 sidebar" style="float: left;">
   //dynamic content
 </div>

 <div id="div2 content" style="float: right;">
  //dynamic content
 </div>

HTML is auto generated so in the markup, div1 originally comes first than div2. Not advisable to change the order (place div2 above div1) since many pages use the same layout. See code above

解决方案

There is my proposition. Using media queries, find the largest width that you want your divto stay side by side.

In your html, place your div like this (the right one before):

<div class="div2">
    div 2
</div>
<div class="div1">
    div 1
</div>

The css used to display those div should look like this:

.div1 {
    float: left;
    width: 25%; 
}
.div2 {
    float: right;
    width: 75%;
}

Finally, to display your left div below the right one, your should add in you css something like this:

@media all and (max-width: 480px) {
    .div1, .div2 { 
        float: none;
        display: block; 
    }
}

Here is a jsfiddle that demonstrate this coding. You only have to resize your browser to see your left div going right under your right one.

这篇关于左浮动div地方下另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！