CSS＋DIV技巧兩則（置中，高度自適應）

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

怎樣使一個層水平置中於瀏覽器中

<!--

div {

position:absolute;

left:50%;

margin:0 0 0 -100px;

width:200px;

height:200px;

border:1px solid red;

}

-->

</style>

<div>web標準常見問題大全</div>

這裡我們使用百分比絕對位置，與外補丁負值的方法，負值的大小為其自身寬度高度除以二

另外一個我現在常用的方法，就是在最外層div在外面再加上一層div，這層div只能有一個屬性align=”center”，不能有別的屬性。這樣就是保持內容置中顯示了。

ff下為什麼父容器的高度不能自適應

一個非常常見的CSS問題，定位使用浮動的時候，下面的層被浮動的層所覆蓋，或者層裡嵌套的子層超出了外層的範圍。

通常的解決辦法是在浮動層後面添加一個額外元素，例如一個div或者一個br，並且定義它的樣式為clear:both。

1、 第一種方法（clear:both）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--

div {width:200px;border:1px solid red}

p {float:left;width:100px;}

-->

</style>

<div><p>web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全</p>

/*在此處加上*/<div style="clear:both"></div>/*清除掉這個p的浮動*/

</div>

2、文章《How To Clear Floats Without Structural Markup》的解決方案

按文章稱第一種方法在某些時候可能會有問題，不過以為是英文的，我沒有讀完。只尋求了他的解決方案。

<style>

.floatholder {

border: 4px solid #000;margin: 10px 0 0;background: #dc8;font-size: 1.2em;}

.floatbox {

float: left;width: 20%;background: #773;border: 3px solid #f55;color: #ffd;}

.clearfix:after {

content: "."; display: block; height: 0; clear: both; visibility: hidden;}

.clearfix {

display: inline-block;}

</style>

<p>This float is not enclosed by the surrounding div container. </p>

</div>

<p>This container lacks the fix.</p>

</div>

<p>See how this float no longer protrudes out of the containing box, with no extra clearing element used in the container!

</p>

</div>

<p>This float container has a class attribute of "clearfix", which applies the :after fix, or the Holly hack, depending on the browser.</p>

</div>

背景色自動填滿（clear:both的擴充應用）

這個其實也是高度自適應的一個問題，在td裡面，這個功能太簡單了，以至於不用考慮，但是當突然轉到div後，這個功能似乎變的很難實現。

但是，從上面的“解決父容器高度自適應”的第一種方法可以想到，如果在父容器設定背景色，並且在不需要背景色的div，設定白色，這樣，是不是就實現了呢？

舉個例子來說明：

父容器包含兩部分，左邊A和右邊B，現在要在A設定背景色“藍色”，B保持底色（白色），並且B的內容是變化的，即，A必須要保持跟B的高度一樣，才能自動填滿背景色。

於是，按照上面的解決方案，在父容器設定“藍色”，B居右，設定白色，A居左，不設定顏色，這樣就可以讓A看起來是自動填滿的了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More