HTML / CSS左浮動問題
[英]HTML/CSS float left issue
問題描述
我最近一直在設計一些需要並排顯示並自動調整高度的內容，但是高度不會重新調整。 div不會擴展到其中的項目大小。 有沒有辦法讓div擴展到其中的元素大小？
的CSS
* {
padding: 0px;
margin: 0px;
}
body {
font-family: 'Metrophobic', sans-serif;
background-color: #c5c5c5;
background-image: url('../images/noise.png');
}
#container {
width:900px;
background-color: #dbdbdb;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-shadow: 0px 0px 5px black;
}
.center_align {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#header {
height:80px;
font-size: 60px;
padding: 10px;
text-align: center;
}
#menu {
width:900px;
height:50px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cacaca;
}
.menu_link {
width:224px;
height:50px;
text-align: center;
font-size: 35px;
float: left;
opacity: 0.3;
background-color: #cacaca;
}
.menu_divider {
width: 1px;
height: 50px;
background-color: #dbdbdb;
float:left;
}
#content {
width: 900px;
height: auto;
padding: 10px;
font-size: 20px;
height: auto;
}
.line_container {
margin-top:5px;
margin-bottom:5px;
}
#footer {
width:900px;
height:22px;
padding-top:2px;
text-align: center;
font-size: 14px;
color:black;
}
a:link {
color:black;
text-decoration: none;
}
a:visited {
color:black;
text-decoration: none;
}
a:hover {
color:black;
text-decoration: none;
}
a:active {
color:black;
text-decoration: none;
}
a.link:link {
color:#21525e;
}
a.link:visited {
color:#21525e;
}
a.link:hover {
color:#307f91;
text-decoration: underline;
}
a.link:active {
color:#307f91;
text-decoration: underline;
}
的HTML
<html>
<head>
<title>Home</title>
<link rel="shortcut icon" href="../images/favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Metrophobic" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.icon {
width:100px;
height:100px;
border: 3px solid white;
border-radius:25px;
margin-left:10px;
margin-right:10px;
background-position: center center;
background-size: 100px 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="center_align">
<img src="../images/header_icon.png" alt="header_icon" width="80" height="80" style="margin-right:20px;float:left;" />
<div style="height:80px;float:left;">Title</div>
</div>
</div>
<div id="menu">
<a href="../home" class="menu_link">Home</a>
<div class="menu_divider"></div>
<a href="../tutorials" class="menu_link">Tutorials</a>
<div class="menu_divider"></div>
<a href="../about" class="menu_link">About</a>
<div class="menu_divider"></div>
<a href="../contact" class="menu_link">Contact</a>
</div>
<div id="content">
<div style="width:900px;">
<div class="icon" style="background-image:url('image.jpg');float:left;"></div><div style="float:left;margin-top:20px;">I'm a freelance Web, Iphone, and Game developer.</div>
</div>
</div>
<div id="footer">
© Cameron
</div>
</div>
</body>
</html>
4 個解決方案
解決方案1
5 已采納 2012-07-27 18:03:48
看起來問題在於#footer元素未正確清除。 加clear: both; 到#footer 。 這會將清除的元素推到浮動元素的下方，並且在功能上應導致相同的視覺效果。
解決方案2
3 2012-07-27 18:19:13
“ container div”基本上“忘記”它是它們的容器，因此只需添加一個overflow:auto; 讓它記住。 我也傾向於為IE添加zoom：1 。
解決方案3
2 2012-07-27 18:05:03
問題是您是浮動元素，這會導致默認情況下包裝div產生問題（相當多...）。
這是一個可行的解決方案，其中將overflow:hidden添加到包裝div中： http : //jsfiddle.net/s2dxw/2/
浮動問題非常令人困惑，並且在過去有過幾種解決方案。 這是有關HTML浮點數的不錯的閱讀： http : //css-tricks.com/all-about-floats/
解決方案4
1 2012-07-27 18:07:18
另外，您可以在規則中添加一些元素clear: both; 在包裝div內部和末端。
CSS左浮動問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.