我一直在尝试不同的方法来创建三列 CSS 布局。在 Youtube 上我发现了一个 video这是在没有包装器的情况下实现的。我一直在尝试将“左”div 列向左浮动，然后将“content”div 列(这在 html 代码中排在第二位)向右浮动。根据视频的结果是该列未 float - 在这种情况下，“右”div 列将自动出现在其他两个列之间，只需要一个 margin 0 auto 来定位它。
你可以到 4:20 之后在视频中看到这个。
然而，这并没有发生在我身上。出于某种原因，我的“右”div 列倾向于换行并结束在页面的其他地方——通常在正文区域之外，并进入 HTML 背景颜色。我知道这可以通过将“右”DIV 列向左浮动来解决，但我想知道为什么我无法实现这一点，因为它在视频中没有我的“右”div 结束在页面的一半和 body 区域之外。
代码在这里
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Three Column!
</title>
<link type="text/css" rel="stylesheet"
href="style.css" media="screen">
</head>
<body>
<div id="header">
<h1>Lorem Ipsum</h1>
</div>
<div id="left">
<p>
<ul>
<li>Here</li>
<li>There</li>
<li>Everywhere</li>
</ul>
</p>
</div>
<div id="content">
<p class="paragraphs">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
<div id="right">
<h2>Ad Content</h2>
<p class="Paragraphs">At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div id="footer"><p>Footer</p></div>
</body>
</html>
然后是 CSS
html, body
{
height : 100% ;
margin : 0 ;
padding : 0
}
html { background : silver }
body
{
background : black ;
color : white ;
height : 780px ;
width : 1620px ;
margin : 0 auto 2em ;
font : 16px "Arial", sans-serif ;
}
#header
{
text-align : center ;
background : purple ;
padding : 3px 0px ;
margin : 100px 0 10px
}
#left
{
float : left ;
margin-right : 45px ;
width : 180px ;
height : 660px ;
background-color : olive ;
padding : 5px
}
#content
{
float : right ;
background-color : gray ;
height : 660px ;
width : 1140px ;
padding : 5px
}
#right
{
width : 180px ;
background-color : blue ;
height : 660px ;
padding : 5px
}
#footer
{
background-color : black ;
clear : both
}
#footer p { text-align : center }
最佳答案
在您的示例中，如果您从#right div 中删除宽度，它似乎可以解决您的问题。在这种情况下，#right div 将占用 2 个 div 之间的可用空间。然而，如果你想坚持你指定的宽度，给#right div 一个 display:inline-block;
这是 fiddle
#right
{
width : 180px ;
background-color : blue ;
height : 660px ;
padding : 5px ;
display:inline-block;
}
关于html - 将中心 DIV 列置于左右浮动列之间的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31359721/