Question

我的部分中有一个3列布局，归类为“内容”。然后，我在“内容”类中有三个div，将“col-4”分类以确定它们的宽度（我使用的是12列响应网格系统：http://www.w3schools.com/css/css_rwd_grid.asp）。在我的CSS中，section和.content都使用“background-color：orange;”进行样式设置。但是柱子没有变成橙色。

我尝试使用“background-color：orange;”为每个列设置样式。但我仍然在柱子上面留有一些空白区域。

由于三列包含在div类“content”中，所以不应该所有背景颜色都变成橙色吗？当我为该部分执行检查元素时，我注意到它只有28像素的高度，当它应该包括所有三列的高度时。

当我执行div类“content”的inspect元素时，高度为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中的最后一个元素添加为clear类的div来解决此问题。这会清除浮动，并且因为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

您可以单独制作新的CSS课程 .COL -4- {背景色：橙;} 背景变成橙色

Answer 3

我建议你使用bootstrap这是图书馆让生活变得非常轻松。 http://www.getbootstrap.com

响应式设计 - 部分内的Div列没有按部分设置样式

3 个答案: