Home > Article > Web Front-end > Help with the floating DIV layout problem (how to align it bottom?) (schematic attached)_html/css_WEB-ITnose
Help with the floating DIV layout problem (how to align it bottom?) (schematic attached)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:091247browse
I am not good at CSS DIV, and I encountered this headache problem today. I drew a picture to show it.
This is probably the interface, all floating DIV...
Reply to the discussion (solution)
The picture means to achieve the effect on the left... I’m sorry I didn’t describe it clearly
You use float: left , this is used for the middle layout. When following, just clear
Forgive me that I have always had problems with my IQ recently. I often don’t understand what the questions raised by the posters mean. . . .
Code:
<div class="aa"> <div class="tt" style="height:200px;background:red;">A</div> <div class="tt"> <div style="width:70%;float:left;background:yellow;height:400px;">B</div> <div style="width:30%;float:left;background:green;height:100px;">D</div> </div> <div class="tt" style="height:200px;background:blue;">C</div></div><div class="aa"> <div class="tt" style="height:200px;background:red;">A</div> <div class="tt2"> <div style="width:70%;float:left;background:yellow;height:400px;">B</div> <div class="D" style="width:30%;float:left;background:green;height:100px;">D</div> </div> <div class="tt" style="height:200px;background:blue;">C</div></div><style>.aa{width:48%;border:solid 2px;float:left;zoom: 1;margin-right:10px;}.aa:after { content: " "; display: block; clear: both; height: 0;}.tt{width:100%; zoom: 1;}.tt:after { content: " "; display: block; clear: both; height: 0;}.tt2{position:relative;width:100%;zoom: 1;}.tt2:after { content: " "; display: block; clear: both; height: 0;}.D{position:absolute;bottom:0;right:0;}</style> “Align bottom”? This one doesn't.
You can use absolute positioning to align the bottom of the "D".
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style> .box { background-color: gray; width: 400px; height: 300px; } .foo { background-color: green; width: 80px; height: 160px; bottom: 0px; right: 0px; } .absolute { position: absolute; } .relative { position: relative; }</style> <div class="box absolute"> <div class="foo absolute">D </div> </div> </body></html>
Forgive me that I have always had problems with my IQ recently, and I often don’t understand what the questions raised by the posters mean. . . .
Code:
<div class="aa"> <div class="tt" style="height:200px;background:red;">A</div> <div class="tt"> <div style="width:70%;float:left;background:yellow;height:400px;">B</div> <div style="width:30%;float:left;background:green;height:100px;">D</div> </div> <div class="tt" style="height:200px;background:blue;">C</div></div><div class="aa"> <div class="tt" style="height:200px;background:red;">A</div> <div class="tt2"> <div style="width:70%;float:left;background:yellow;height:400px;">B</div> <div class="D" style="width:30%;float:left;background:green;height:100px;">D</div> </div> <div class="tt" style="height:200px;background:blue;">C</div></div><style>.aa{width:48%;border:solid 2px;float:left;zoom: 1;margin-right:10px;}.aa:after { content: " "; display: block; clear: both; height: 0;}.tt{width:100%; zoom: 1;}.tt:after { content: " "; display: block; clear: both; height: 0;}.tt2{position:relative;width:100%;zoom: 1;}.tt2:after { content: " "; display: block; clear: both; height: 0;}.D{position:absolute;bottom:0;right:0;}</style> The brother perfectly solved my problem and also provided a compatibility solution, which is amazing.
Points are awarded for the knot.