响应式设计 - Div 部分中的列未使用部分样式

Question

我的部分中有一个 3 列布局，classed "content"。然后，我在 "content" class、classed "col-4" 中有三个 div 来确定它们的宽度（我使用的是 12 列响应式网格系统: http://www.w3schools.com/css/css_rwd_grid.asp)。在我的 CSS 中，section 和 .content 的样式都是 "background-color: orange;" 但列没有变成橙色。

我尝试用 "background-color: orange;" 设置每一列的样式，但我仍然在列上方留有白色 space 的边距。

既然三列包含在 div class "content" 中，所有的背景颜色不应该变成橙色吗？当我为该部分检查元素时，我注意到它只有 28 像素的高度，而它应该包括所有三列的高度。

当我检查 div class "content" 的元素时，高度为 0px。

出了点问题。我错过了什么？谢谢！

编辑：在最后两个屏幕截图中，我去掉了 h2“3 列布局”，认为它可能是导致问题的原因，但事实并非如此。

HTML:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>SASS Project</title>
<link href="styles.css" type="text/css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>

<![endif]-->
</head>

<body>
<div id="container"><!--container-->

<div class="row"><!--first row--> 
<header>  
    <div class="center">                        
       <h2>Header</h2>
    </div>
</header>
</div><!--end first row-->

<nav><!--Navigation Bar-->
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    </ul>
</nav>


<div class="row"><!--second row-->
<div class="col-6">
<article><!--Article-->
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel
 tortor id 
est imperdiet fermentum. Sed in interdum justo. Cras feugiat
 scelerisque risus 
eu congue. Mauris semper sed neque in pulvinar. Morbi posuere ligula 
in aliquam 
feugiat. Aenean in lectus vel risus vestibulum molestie. Donec mollis
 at odio 
id tempor.</p>
<img src="images/image1.jpg" id="image1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus 
vel tortor id 
est imperdiet fermentum. Sed in interdum justo. Cras feugiat
 scelerisque risus 
eu congue. Mauris semper sed neque in pulvinar. Morbi posuere ligula
 in aliquam 
feugiat. Aenean in lectus vel risus vestibulum molestie. Donec mollis
 at odio 
id tempor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel
 tortor id 
est imperdiet fermentum. Sed in interdum justo. Cras feugiat
 scelerisque risus 
eu congue. Mauris semper sed neque in pulvinar. Morbi posuere ligula 
in aliquam 
feugiat. Aenean in lectus vel risus vestibulum molestie. Donec 
mollis at odio
</p>
</article>
</div>


<div class="col-6">
<aside><!--Aside-->
<h2>Aside</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus 
vel tortor id est imperdiet fermentum. Sed in interdum justo. Cras
 feugiat scelerisque risus eu congue. Mauris semper sed neque in
 pulvinar. Morbi posuere ligula in aliquam feugiat. Aenean in lectus
 vel risus vestibulum molestie. Donec mollis at odio id tempor.</p>
<img src="images/image2.jpg" id="image2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel
 tortor id est imperdiet fermentum. Sed in interdum justo. Cras feugiat
 scelerisque risus eu congue. Mauris semper sed neque in pulvinar.
 Morbi posuere ligula in aliquam feugiat. Aenean in lectus vel risus
 vestibulum molestie. Donec mollis at odio id tempor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel
 tortor id est imperdiet fermentum. Sed in interdum justo. Cras feugiat
 scelerisque risus eu congue. Mauris semper sed neque in pulvinar.
 Morbi posuere ligula in aliquam feugiat. Aenean in lectus vel risus
 vestibulum molestie. Donec mollis at odio
</p>
</aside>
</div>
</div><!--end second row-->

<div class="clear">
</div>


<div class="row"><!--third row-->
<section><!--Section-->
    <h2>Section</h2>
<div class="content">

    <div class="col-4">
    <h4>Content 1</h4>
    </div><!--closes leftcol-->

    <div class="col-4">
    <h4>Content 2</h4>
    </div><!--closes midcol-->

    <div class="col-4">
    <h4>Content 3</h4>
    </div><!--closes rightcol-->
</div>
</section>
</div><!--end third row-->


<footer><!--Footer-->
<h2>Footer</h2>
</footer>

</div><!--closes container-->
</body><!--closes body-->

</html>

CSS:

html{overflow:scroll}/*for tablets and phones*/

*{box-sizing:border-box;}

.row:after{content:"";
       clear:both;
       display:block;}

[class*="col-"]{float:left;
            padding:10px;}


/*global styles*/
#container {height:auto;
        margin:auto;
        max-width:1000px;
        width:100%}

header {width:100%;
   height:40px;
   background-color:red;
   margin-bottom:15px;}

nav ul{list-style-type: none;
  margin: 0;
  padding: 0;
  text-decoration:none;
  text-align:center;
  margin-bottom:15px;}

nav ul li a{display:inline;
        margin-left:15px;
        text-decoration:none;}

nav ul li a:hover {text-decoration: underline;}

h2 {text-align:center;}

.h2Section {background-color:orange;}

h4 {display: block;
text-align:center;}

#image1 {float:left;
    height:160px;
    width:160px;}

#image2 {float:right;
    height:160px;
    width:160px;}

article{width:100%;
    margin-right:5%;
    float:left;
    height:600px;
    background-color:green;
    overflow:scroll;}

aside{width:100%;
  float:right;
  height:600px;
  background-color:green;
  overflow:scroll;}

section {background-color:orange;}

.content{width:auto;
     height:auto;
     background-color:orange;}

.clear{clear:both;}

footer {width:100%;
   height:25px;
   background-color:red;
   margin-bottom:15px;
   clear:both;}

.column {background-color:green;}

/* For mobile phones: */
[class*="col-"] {
width: 100%;
}

@media only screen and (min-width: 600px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

nav ul li {display:inline;}
}

Answer 1

由于您的列 div 是浮动的，它们不会自动扩展其父项的高度以适合其大小。由于内容 div 中没有其他内容，它的高度为 0。您可以通过添加内容 div 中的最后一个元素 div 和 clear 来解决此问题] class。这将清除浮动，并且由于 div 位于浮动列下方并且实际上计入父级的高度，它将使内容 div 扩展到列的高度。

因此，您的内容 div 的 HTML 现在将是：

<div class="content">

    <div class="col-4">
    <h4>Content 1</h4>
    </div><!--closes leftcol-->

    <div class="col-4">
    <h4>Content 2</h4>
    </div><!--closes midcol-->

    <div class="col-4">
    <h4>Content 3</h4>
    </div><!--closes rightcol-->
    <div class="clear"></div><!-- Clears the floating -->
</div>

这是 JSFiddle 上的工作演示：https://jsfiddle.net/gjsgob8m/。

Answer 2

你可以单独制作新的CSSclass .col-4{背景颜色：橙色;} 背景变成橙色

Answer 3

我推荐你使用 bootstrap 它是让生活变得轻松的图书馆。 http://www.getbootstrap.com

响应式设计 - Div 部分中的列未使用部分样式

Responsive Design - Div Columns Within Section Not Styling With Section

html

css

background-color

multiple-columns

responsive-design