Question

首先，我要感谢这个社区的成员为我提供了大量的帮助在过去的几个月里发现了这里。我没有一个项目，没有你的提示和技巧我最终确定。

现在我遇到了响应式布局的问题，我需要你的帮助：

我有这样的布局： http://codepen.io/Buzzjump/pen/tfeys

<div class='outer'>
<div class='sidebar_links'>Div1</div>
<div class='mitte_rechts'>
<div class='d2'>Div2</div>
<div class='d1'>Div3</div>
</div>
</div>

现在的CSS

div{
  display:inline-block;
  background-color:#cdcdcd;
  margin:0px; 0;padding:0px;width:150px}
.d1{
    float:right;
    background: blue;
  color: white;
}
.d2{
  background: orange;
}
.mitte_rechts{
    padding:0;
    width:70.81%;
  float: left;
  margin-left:0px;
}

.sidebar_links{
    height: 200px;
    float: left;    
  background: red;
}

.outer{
    height: 230px;
  min-width: 80%;
  background-color:yellow;
  margin-left: 20px;
  overflow: hidden;

}

有一个外盒（外）和两个内盒（Div1和mitte_rechts）。在'mitte_rechts'中还有两个盒子（Div 2，Div3），它们都是对齐的。我想要的是当窗口缩小到断点（768）时，首先在mitte_rechts中的Div2下显示Div3。也许我只是被扼杀但是有解决方案吗？到目前为止还没有使用JS。

提前致谢。

Answer 1

尝试以下内容：

.d1 {
    float: right;
    background: blue;
    color: white;
}

.d2 {
    background: orange;
    float: left;
}

@media screen and (max-width: 768px) {
    .d1, .d2 {
        float: none;
        display: block;
    }
}

顺便说一下：你的div上不需要inline-block。内联块是浮动的替代方案。所以要么使用浮动，要么使用内联块。我不是内联块的粉丝，因为IE6和IE7不支持它。

Answer 2

尝试以下方法：

1）删除width:70.81%;' from '.mitte_rechts

2）添加以下样式：

 .d1, .d2{
   float:left;
 }

 @media (min-width: 768px){
   .mitte_rechts{
     width:70.81%;
   }

   .d1{
     float:right;
   }
 }

Answer 3

您可以将其添加到CSS

@media (max-width: 768px) {
    .d1{
        float: lef;
    }
    .d2{
        margin-right:100%;
    }
}

这里发生的事情是.d1决定首先浮动到左边，然后.d2占据他右边的剩余空间，以便.d1被迫置于.d2

之下

响应式CSS div定位优先级

3 个答案: