帮忙看看浮动DIV布局问题(怎么靠下对齐啊?)(内附示意图)_html/css

回复讨论(解决方案)

首頁

web前端

html教學

帮忙看看浮动DIV布局问题(怎么靠下对齐啊?)(内附示意图)_html/css_WEB-ITnose

Jun 24, 2016 am 11:43 AM

本人不擅长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>

登入後複製

兄弟完美的解决了我的问题,而且还给出了兼容性方案,功力了得.

结贴给分了.

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn