响应CSS div定位优先级 [英] Responsive CSS div positioning priority

问题描述

首先，我要感谢这个社群的成员在过去几个月里找到的大量帮助I
。没有我的一个项目，我没有你的提示和技巧，我完成。

first of all I would like to thank the members of this community for the huge amount of help I found here in last few month. There wasn't a single project of mine which I finalized without your tips and tricks.

现在我有一个响应布局的问题，我需要你的帮助：

Right now I got a problem with a responsive layout where I need your kind help:

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

I got a layout like this: 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）首先Div3显示在Div2下的mitte_rechts。也许我只是被堵头，但有这个解决方案吗？
到这一点没有使用JS。

There is an outer box (outer) and two inner boxes (Div1 and mitte_rechts). In 'mitte_rechts' there are two more boxes(Div 2, Div3) and they are all aligned. What I want is that when the window is scaled down to a breakpoint (768) first Div3 is display under Div2 in mitte_rechts. Maybe I'm just blockheaded but is there a solution for this? To this point no JS is used.

提前感谢。

推荐答案

尝试以下操作：

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

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

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

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

By the way: You don't need inline-block on your divs. Inline-block is an alternative to floating. So either use floating or inline-block. I'm not a fan of inline-block because IE6 and IE7 don't support it.

这篇关于响应CSS div定位优先级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！