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

回复讨论(解决方案)

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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

熱AI工具

熱工具

熱門話題

Java教學

1670

CakePHP 教程

1428

Laravel 教程

1329

PHP教程

1274

C# 教程

1256

Related knowledge

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML：建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML與CSS和JavaScript：比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML：是編程語言還是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。