javascript - Responsive CSS div positioning priority -
First of all, I would like to thank the members of this community for the help they received in the last few months. I did not have any projects, which I finalized without your tips and tips.
I have now found a problem in a responsive layout where I need your help:
I found a layout like this:
& lt ; Div class = 'outer' & gt; & Lt; Div class = 'sidebar_links' & gt; Divi 1 & lt; / Div & gt; & Lt; Div class = 'mitte_rechts' & gt; & Lt; Div class = 'd2' & gt; Div2 & lt; / Div & gt; & Lt; Div class = 'd1' & gt; Divio 3 & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;
Now the current CSS
div {display: inline-block; Background color: #cdcdcd; Margin: 0px; 0; Padding: 0px; Width: 150px}. D1 {float: right; Background: blue; White color; }. D2 {background: orange; } .mitte_rechts {padding: 0; Width: 70.81%; Swim left; Margin-left: 0px; }. Sidebar_link {height: 200px; Swim left; Background: Red; } .tar {height: 230px; Minimum width: 80%; Background color: yellow; Margin-left: 20px; Hidden flurry; }
is an external box (external) and two internal boxes (div1 and mitte_rechts). There are two more boxes (div 2, div3) in 'Mitte_rechts' and they are all combine. What do I want to do when the window is truncated to breakpoint (768) then the first divo3 is displayed in the mit_recht under 3devil 2. Maybe I'm just a scoundrel but what's the solution? No JS is used at this point.
Try the following:
Thanks in advance
By the way: you do not need the inline block
on your device. There is an option for floating inline blocks. Use either floating or inline-block I am not an inline-block fan because IE6 and IE7 do not support it.
Comments
Post a Comment