3

我创建了简单的网页布局，包括：页眉、左、右和页脚 div 块。

这是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;
}

网页如下所示： 在此处输入图像描述

但是当我尝试像在图片上一样添加左侧块时，它看起来不正确。我为此使用这个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/

如何将左 div 块放在图片上的黄色区域？感谢您的任何帮助。

4

4 回答 4

2

你不需要放：

.left {
    float: right;
}
于 2013-09-04T16:07:24.613 回答
2

当您使用浮动时，浮动元素将从文档流中移除并“浮动” - 随后的元素然后围绕浮动元素流动。要以您希望的方式使用右浮动，右浮动元素.right需要在 DOM 中出现在左元素之前。

或者，将您的.left元素向左浮动，并将您的.right元素也向左浮动 - 然后它们将正确布局。

之后别忘了清除花车:)

作为替代方案，您可以设置.left和.right到display: inline-block;，这将解决您的问题而无需浮动和清除。然后，您确实需要 (a) 将父元素的 font-size 设置为 0 以避免出现空格问题，或者 (b) 注释掉 and 之间的.left空格.right。有兴趣的谷歌一下。

于 2013-09-04T16:10:25.860 回答
2

您只想.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;
}

小提琴：http: //jsfiddle.net/YDNSA/1/。我添加.container以帮助清除事物，因为您不想四处漂浮.header或.footer. 请记住避免将margin, paddingorborder放在.rightor上.content。

于 2013-09-04T16:20:01.283 回答
2

我制作了一个演示文件，您如何制作简单的页面布局：

享受它页面布局示例

CSS：

header {
  width: 400px;
  border: 2px solid black;
  text-align: center;
  margin-bottom: 5px;
}

article {
  width: 300px;
  height: 400px;
  border: 2px solid black;
  margin-right: 5px;
  float: left;
}

sidebar {
  width: 90px;
  height: 400px;
  border: 2px solid yellow; 
  float: left;
}

footer {
  width: 400px;
  border: 2px solid black;
  text-align: center;
  margin-top: 5px;
 clear: both;
 float: left;
}
于 2013-09-04T16:24:12.780 回答