浮动列下方的大间隙？

时间：2015-08-07 17:18:00

标签： javascript html css

我创建了一个典型的3列布局。出于某种原因，中间列在前三个和后三个之间产生了非常大且不需要的间隙。是否有办法使所有容器之间的差距相同？

JSFiddle

＆＃13;
＆＃13; 
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;	
}

html, body {
	font-family: 'Lato', sans-serif;
}

column-container {
	width: 100%;
	background: #EEEEEE;
}

wrapper-container {
	width: 80%;	
	margin: auto;
}

column-three {
	padding: 25px;
}

.container {
	background: #FFFFFF;
	border-radius: 2px;
	box-shadow: 0px 2px 1px 1px rgba(0,0,0,0.05);
}

.container h2 {
	padding: 25px;
	font-size: 18px;
	text-align: center;	
	font-weight: bold;
	color: #22313F;
}

.container:hover h2 {
	color: #22313F;
}

.container .image {
	margin: auto;
	width: 150px;
	height: 150px;
	border-radius: 100%;
	background: #22313F;	
}

.container .text {
	padding: 25px;
	font-weight: 400;
	line-height: 30px;	
}

.buy-button {
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 25px;	
}

.buy-button a {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 15px 25px;	
	text-decoration: none;
	background: #4ECDC4;
	color: #FFFFFF;
	border-radius: 2px;
}

.buy-button a:hover {
	background: #45B5AD;	
}

column-container,
wrapper-container,
column-three {
	display: block;
}

column-three {
	float: left;
}

column-container {
	overflow: hidden;
}

wrapper-container {
	overflow: hidden;	
}

column-three {
	width: 33.33%;	
}


@media screen and (max-width: 960px) {
	
	column-three {
		width: 50%;	
	}
		
}

@media screen and (max-width: 768px) {
	
	column-three {
		width: 100%;	
	}
	
}

@media screen and (max-width: 480px) {
	
	wrapper-container {
		width: 90%;	
	}
	
	.container .text {
		display: none;	
	}
	
	.buy-button {
		margin-top: 25px;	
	}
	
}
＆＃13; 
<column-container>
	<wrapper-container>
        <column-three>
        	<div class="container">
            	<h2>Warcraft I</h2>
                <div class="image"></div>
                <div class="text">For ages, the fallen titan Sargeras plotted to scour all life from Azeroth. To this end, Sargeras possessed the human sorcerer Medivh.</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
        <column-three>
        	<div class="container">
            	<h2>Warcraft II</h2>
                <div class="image"></div>
                <div class="text">The human nation of Stormwind had fallen before the Horde. Knight Champion Anduin Lothar gathered the scattered remnants of the human army and led the refugees north</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
        <column-three>
        	<div class="container">
            	<h2>Warcraft III</h2>
                <div class="image"></div>
                <div class="text">The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
        <column-three>
        	<div class="container">
            	<h2>Warcraft I</h2>
                <div class="image"></div>
                <div class="text">The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
        <column-three>
        	<div class="container">
            	<h2>Warcraft II</h2>
                <div class="image"></div>
                <div class="text">The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
        <column-three>
        	<div class="container">
            	<h2>Warcraft III</h2>
                <div class="image"></div>
                <div class="text">The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
    </wrapper-container>
</column-container>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

每3 <wrapper-container>你必须使用<column-three>所以这个问题不会出现

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;	
}

html, body {
	font-family: 'Lato', sans-serif;
}

column-container {
	width: 100%;
	background: #EEEEEE;
}

wrapper-container {
	width: 80%;	
	margin: auto;
}

column-three {
	padding: 25px;
}

.container {
	background: #FFFFFF;
	border-radius: 2px;
	box-shadow: 0px 2px 1px 1px rgba(0,0,0,0.05);
}

.container h2 {
	padding: 25px;
	font-size: 18px;
	text-align: center;	
	font-weight: bold;
	color: #22313F;
}

.container:hover h2 {
	color: #22313F;
}

.container .image {
	margin: auto;
	width: 150px;
	height: 150px;
	border-radius: 100%;
	background: #22313F;	
}

.container .text {
	padding: 25px;
	font-weight: 400;
	line-height: 30px;	
}

.buy-button {
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 25px;	
}

.buy-button a {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 15px 25px;	
	text-decoration: none;
	background: #4ECDC4;
	color: #FFFFFF;
	border-radius: 2px;
}

.buy-button a:hover {
	background: #45B5AD;	
}

column-container,
wrapper-container,
column-three {
	display: block;
}

column-three {
	float: left;
}

column-container {
	overflow: hidden;
}

wrapper-container {
	overflow: hidden;	
}

column-three {
	width: 33.33%;	
}


@media screen and (max-width: 960px) {
	
	column-three {
		width: 50%;	
	}
		
}

@media screen and (max-width: 768px) {
	
	column-three {
		width: 100%;	
	}
	
}

@media screen and (max-width: 480px) {
	
	wrapper-container {
		width: 90%;	
	}
	
	.container .text {
		display: none;	
	}
	
	.buy-button {
		margin-top: 25px;	
	}
	
}
<column-container>
	<wrapper-container>
        <column-three>
        	<div class="container">
            	<h2>Warcraft I</h2>
                <div class="image"></div>
                <div class="text">For ages, the fallen titan Sargeras plotted to scour all life from Azeroth. To this end, Sargeras possessed the human sorcerer Medivh.</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
        <column-three>
        	<div class="container">
            	<h2>Warcraft II</h2>
                <div class="image"></div>
                <div class="text">The human nation of Stormwind had fallen before the Horde. Knight Champion Anduin Lothar gathered the scattered remnants of the human army and led the refugees north</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
        <column-three>
        	<div class="container">
            	<h2>Warcraft III</h2>
                <div class="image"></div>
                <div class="text">The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
      </wrapper-container>
      <wrapper-container>
        <column-three>
        	<div class="container">
            	<h2>Warcraft I</h2>
                <div class="image"></div>
                <div class="text">The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
        <column-three>
        	<div class="container">
            	<h2>Warcraft II</h2>
                <div class="image"></div>
                <div class="text">The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
        <column-three>
        	<div class="container">
            	<h2>Warcraft III</h2>
                <div class="image"></div>
                <div class="text">The demonic Burning Legion prepare to launch their long-awaited assault on the mortal world. Survival is a matter of strategy.</div>
                <div class="buy-button">
                	<a href="#">Buy Now</a>
                </div>
            </div>
        </column-three>
    </wrapper-container>
</column-container>

答案 1 :(得分：0)

请参阅此fiddle

我在第三栏之后添加了<div>，如下所示

<div style="clear:both"></div>

存在大量空白的原因是，对于您的列，您指定了float:left，必须在每三列之后清除它。

清除我们使用样式clear:both

在docs

中详细了解相关信息

答案 2 :(得分：0)

问题是你的花车没有正确清理，因为它们的高度都不一样。第二种是第二种，因为它很突出（在我有限的英语中有点难以解释）

最干净的解决方案是将这样的东西添加到你的css中：

column-three:nth-child(3n+1) {
    clear:both;
}

这将强制一行的第一个元素一直向左开始。

由于您的布局具有响应性，因此您可以在2列媒体查询中添加以下内容：

column-three:nth-child(2n+1) {
    clear:both;
}
相关问题
最新问题