Question

我一直在尝试创建三列CSS布局的不同方法。在Youtube上，我找到了一个video，这是在没有包装器的情况下实现的。我一直试图将“left”div列浮动到左侧，然后将“content”div列（在html代码中排在第二位）向右移动。根据视频的结果是未浮动的列 - 在这种情况下“右”div列将自动在另外两列之间出现，只需要一个0自动余量来定位它。

您可以在4:20之后在视频中看到这一点。

但是，这种情况不会发生在我身上。出于某种原因，我的“正确”div列有一个趋势，即在页面的其他位置包装和结束 - 通常在主体区域之外，以及HTML背景颜色。我知道这可以通过将“右”DIV列向左浮动来解决，但我想知道为什么我无法实现这一点，因为它是在视频中完成的，而我的“右”div在页面的一半处结束在身体区域之外。

代码在这里

<!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 }

Answer 1

在您的示例中，如果从#right div中删除宽度，它似乎可以解决您的问题。在这种情况下，＃right div将占用2个div之间的可用空间。但是，如果你想坚持你指定的宽度，给#right div一个显示：inline-block;

以下是fiddle

#right 
{ 
   width : 180px ;
   background-color : blue ;
   height : 660px ;
   padding : 5px ;
   display:inline-block;
}

Answer 2

在良好的响应式网页设计中，使用“div”并将它们对齐到不同的列浮动内容通常不是一个好主意。

您应该考虑使用响应式网格系统（或使用流行的Twitter引导程序框架），您可以在http://getbootstrap.com/css/#grid

阅读更多内容

它基本上包含用于简单布局选项的预定义类，在您的情况下，您可以使用以下内容为3个浮动列部分设置以下代码：

<!-- Column 1 -->    
    <div class="col-md-4">
    <p> Some content here </p>
    </div> 

<!-- Column 2 -->    
    <div class="col-md-4">
    <p> Some content here </p>
    </div> 

<!-- Column 3 -->    
    <div class="col-md-4">
    <p> your content here </p>
    </div>

然后，您可以附加额外的边距和/或填充CSS代码，以进一步自定义列内容的位置。

希望这有帮助！

Answer 3

作为一名网站设计师，我不喜欢我的元素在没有控制权的情况下浮动，最好只将它们全部浮动在左中并为每个div设置宽度。请参阅以下示例：

＆＃13;

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 
{ 
        margin-right : 20px ;
        width : 180px ;
        height : 660px ;
        background-color : olive ;
        padding : 5px 
}

#content 
{ 
     background-color : gray ; 
     height : 660px ; 
     width : 1140px ;
     padding : 5px 
}

#right 
{ 
       width : 180px ;
       background-color : blue ;
       height : 660px ;
       padding : 5px 
}

#left, #content, #right {
    float: left;
}

#footer 
{ 
       background-color : black ; 
       clear : both 
}

#footer p { text-align : center }

＆＃13;

<title>
Three Column!
</title>
<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>

＆＃13;

jsfiddle版本在这里http://jsfiddle.net/jx0qL9b6/2/

将中心DIV列放入左右浮动列之间的位置？

3 个答案: