本人不擅长CSS+DIV,今日遇到这个头痛的问题.画图以示之.
大概界面就是这种,,全部是浮动DIV...
图片的意思是想实现左边的效果...不好意思刚才没描述清楚
你使用float:left ，这个是中间布局使用，，下面的时候，直接clear
原谅本人最近智商总是出现问题，时常看不懂各楼主提出的问题到底是什么意思。。。。
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> “靠下对齐”？这个没有。
你可以使用绝对定位，让 “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>
原谅本人最近智商总是出现问题，时常看不懂各楼主提出的问题到底是什么意思。。。。
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>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
262
收藏
