Help with the floating DIV layout problem (how to align it bottom?) (schematic attached)_html/css

Help with the floating DIV layout problem (how to align it bottom?) (schematic attached)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:09

Original

1258 people have browsed it

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>

Copy after login

“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>

Copy after login

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>

Copy after login

The brother perfectly solved my problem and also provided a compatibility solution, which is amazing.

Points are awarded for the knot.