CSS並排Divs
[英]CSS Side-by-side Divs
問題描述
在下面的示例中，我嘗試使div“左”和“右”並排顯示。 顯然，我的理解是有缺陷的，但是我犯了什么錯誤，因為（至少在Chrome中）它們不會並排出現。
謝謝
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
background: #ffffff;
text-align:center;
}
#container {
margin: 100px auto 100px auto;
padding: 0;
background: #eeeeee;
text-align:left;
width: 49.5em;
}
#title {
margin: 2em;
padding: 0;
background: dddddd;
width: 49.5em;
}
#graphics {
margin: 0;
padding: 0;
height:200px;
background: #cccccc;
width: 49.5em;
}
#navigation {
margin: 0;
padding: 0;
background: #bbbbbb;
height:3em;
width: 49.5em;
}
#wrapper {
margin: 0;
padding: 0;
background: #aaaaaa;
width: 49.5em;
}
#left, #right {
margin: 0;
padding: 0;
float: left;
background: #999999;
width: 41em;
}
#right {
margin: 1.5em 0 0 0.5em;
padding: 0;
float: right;
background: #888888;
width: 8em;
}
.clear {
margin: 0;
padding: 0;
height: 0;
font-size: 1px;
line-height: 0;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="title">Title</div>
<div id="graphics">Graphics</div>
<div id="menu">Menu Item</div>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
<div class="clear">
</div>
</div>
</div>
</body>
</html>
3 個解決方案
解決方案1
4 已采納 2011-09-26 17:41:38
問題是您在#right上指定了1.5em的空白邊距。 拿出來，它應該工作。 這是一個工作的jsfiddle 。
解決方案2
0 2011-09-26 17:42:14
從#right移除邊距
#right {
/* margin: 1.5em 0 0 0.5em;*/
padding: 0;
float: right;
background: #888;
width: 8em;
}
解決方案3
0 2011-09-26 17:45:04
這為我解決了：
#left {
margin: 0;
padding: 0;
float: left;
background: #999999;
width: 41em;
}
#right {
/* margin settings moved the box*/
padding: 0;
float: right;
background: #888888;
width: 8em;
}
“臭名昭着”的CSS：2 divs並排，crossbrowser版本（？）
[英]The “infamous” CSS: 2 divs side-by-side, crossbrowser edition(?)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.