Home > Article > Web Front-end > 帮忙看看浮动DIV布局问题(怎么靠下对齐啊?)(内附示意图)_html/css_WEB-ITnose
帮忙看看浮动DIV布局问题(怎么靠下对齐啊?)(内附示意图)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:091205browse
本人不擅长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> 兄弟完美的解决了我的问题,而且还给出了兼容性方案,功力了得.
结贴给分了.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnoseNext article：刚毕业的小草鸟请教一下工作问题_html/css_WEB-ITnose