css浮動元素寬度根據內容自適應

admin發表於2017-03-19
CSS

如果是塊級元素，在預設狀態下，如果沒有規定寬度，那麼會佔滿父元素。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
#box{
  width:500px;
  height:300px;
  background:green;
  margin:0px auto;
}
#inner{
  height:100px;
  background:red;
}
</style>
</head>  
<body>  
<div id="box">
  <div id="inner">螞蟻部落</div>
</div>
</body> 
</html>

子div並沒有設定寬度，它會填滿整個div的寬度，如果是浮動元素，就不是這樣。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
#box{
  width:500px;
  height:300px;
  background:green;
  margin:0px auto;
}
#inner{
  height:100px;
  background:red;
  float:left;
}
</style>
</head>  
<body>  
<div id="box">
  <div id="inner">螞蟻部落</div>
</div>
</body> 
</html>

如果設定了浮動，那麼元素的寬度就會根據內容進行自適應。

相關文章