我创建了简单的网页布局，其中包括:页眉、左侧、右侧和页脚 div block 。
这是html代码:
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="body">
<div class="header">
<p>Header</p>
</div>
<div class="left">
<div class="article">
<p>Article 1</p>
</div>
<div class="article">
<p>Article 2</p>
</div>
<div class="article">
<p>Article 3</p>
</div>
</div>
<div class="right"></div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
这是CSS样式:
body {
margin: 0px;
}
.header {
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.left {
margin-top: 5px;
width: 1000px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.article {
margin: 50px;
height: 400px;
border-style: solid;
border-color: green;
border-width: 5px;
border-radius: 3px;
}
.footer {
margin-top: 5px;
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
p {
text-align: center;
}
网页看起来是这样的:
但是当我尝试像图片一样添加左侧 block 时，它看起来不正确。我为此使用了这个 css 代码:
.right {
margin-top: 5px;
width: 200px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
float: right;
}
jsFiddle 演示 - http://jsfiddle.net/khbTg/
如何将Left div block 放在图片中的黄色区域？感谢您的帮助。
最佳答案
您只想将 .right 向右浮动。如果您可以将标记更改为:
<div class="header">#header</div>
<div class="container">
<div class="right">
<div class="nav">#nav</div>
</div>
<div class="content">
<div class="article">#article</div>
<div class="article">#article</div>
<div class="article">#article</div>
</div>
</div>
<div class="footer">#footer</div>
然后您会想要添加样式:
.container { clear: both; }
.content { width: 80%; }
.right {
width: 20%;
float: right;
}
.content, .right {
margin: 0;
padding: 0;
}
fiddle :http://jsfiddle.net/YDNsA/1/ .我添加了 .container 来帮助清除内容，因为您不想在 .header 或 .footer 周围 float 。请记住避免在 .right 或 .content 上放置 margin、padding 或 border >.
关于css - 如何使用 css 将 div block 放入右侧屏幕区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18618701/