Responsive CSS div positioning priority

问题

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:

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>

Now the current 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;

}

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.

Thanks in advance.

回答1:

Try out the following:

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

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

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

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.

回答2:

You could add this to your CSS

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

What happens here is that .d1 decides to float to the left in the first place, then .d2 takes up the rest of the space he has on his right, so that .d1 is forced to go under .d2

回答3:

try the following:

1) remove width:70.81%;' from '.mitte_rechts

2) add the following styling:

 .d1, .d2{
   float:left;
 }

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

   .d1{
     float:right;
   }
 }

来源：https://stackoverflow.com/questions/24981280/responsive-css-div-positioning-priority

标签

javascript

css

responsive-design