Question

我一直在试图找出我的右边div浮出位置的东西。

＆＃13;

.header{
	background:red;
	height:100px;
	width:100%;
}

.left{
	background:white;
	float:left;
	height:800px;
	width: 200px;
}

.main{
	background:yellow;
	height: 800px;
	width: 600px;
	overflow: hidden;
}

.right{
	background:white;
	float: right;
	height:800px;
	width: 200px;
	overflow: hidden;
}

.footer{
	background:red;
	height: 100px;
	width:100%;
}

＆＃13;

<!doctype html>
<html lang="en"> 
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 
<title>Layout</title> 
<body> 
    <div class="header"></div>
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
    <div class="footer"></div>
</body> 
</html>

＆＃13;

任何指针？我知道这看起来很简单，但我已经画了一个空白

Answer 1

div{
	border: 1px solid #000000;
	margin:3px;
}

.header{
    background:red;
    height:100px;
    width:100%;
}

.left{
    background:white;
    float:left;
    height:800px;
    width: 200px;
}

.main{
    background:yellow;
    height: 800px;
    width: auto;
    overflow: hidden;
}

.right{
    background:white;
    float: right;
    height:800px;
    width: 200px;
    overflow: hidden;
}

.footer{
    background:red;
    height: 100px;
    width:100%;
}

    <div class="header">header</div>
    <div style="clear:both;"></div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
    <div style="clear:both;"></div>
    <div class="footer">footer</div>

这是正确的方法：

首先放置浮动元素（左 - 右）而不是非浮动元素（主要）

也可以在漂浮后让你清醒（“清除：两者”）

ps我给主要的“with：auto”但不是必需的...只是更兼容

    <div class="header">header</div>
    <div style="clear:both;"></div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
    <div style="clear:both;"></div>
    <div class="footer">footer</div>

Answer 2

从语义上讲，您可能应首先使用页面的主要内容，然后是支持内容。此模板还会根据可用空间缩小内容区域，但如果您希望通过在.content元素上设置特定宽度来固定布局，则可以使用CSS轻松调整内容区域。

<div class="header"></div>
<div class="content">
    <div class="main">
        <div class="main-inner"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

然后对于CSS，你使用这样的东西：

.header, .footer, .content {
    clear: both;
}
.header, .footer {
    height: 100px;
}
.content {
    width: 100%;
    max-width: 1000px; /* Keeps the site from growing beyond 1000px */
    margin: 0 auto; /* Centers the content area */
}
.main, .left, .right {
    float: left;
}
.main {
    width: 100%;
}
.main-inner {
    margin: 0 200px;
}
.left, .right {
    width: 200px;
}
.left {
    margin-left: -100%; /* Puts the left sidebar to the top left of the .content element */
}
.right {
    margin-left: -200px; /* Puts the right sidebar on the right edge of the .content element */
}

/* Colors and Heights so you can see things */
.main-inner, .left, .right { min-height:600px; }
.header, .footer { background-color: red; }
.main-inner { background-color: yellow; }

http://jsfiddle.net/j1rLfmky/

圣杯/右边的div

2 个答案: