Question

我是HTML / CSS的新手，我不知道为什么当我调整窗口宽度小于480px时，第三个“包”也不会向左浮动。任何帮助将非常感激。谢谢！

http://codepen.io/anon/pen/EaymKP?editors=110

.packages{
	width:92%;
	margin:0 auto;

}
.pack{
    margin-left:-0.483091%;
	width:25.483091%;
	background-color:#e0e0e0;
	border-radius:5px;
	float:left;
	position: relative;
	z-index: 1;
}

.pack ul li:first-child{
	border-top:none;
}

.pack ul{
	list-style-type: none;
	text-align: center;
}

.pack ul li {
	border-top:1px solid #ffffff;
	font:normal 0.83875em Arial,sans-serif;
	color:#797979;
	height:18px;
	padding:13px 0;
}

.pack ul li a{
	display:block;
	text-decoration: none;
	color:#ffffff;
	font:bold 1.118125em Arial,sans-serif;
	width:72.985781%;
	height:29px;
	background-color:#575757;
	border-radius:20px;
	text-align: center;
	padding-top:10px;
	margin:0 auto;
}

.pack ul li.last-child{
	border-radius: 0 0 5px 5px;
	border-bottom:1px solid #e0e0e0;
	padding:30px 0;
	height:29px;
}

.pack.third_column ul li.last-child{
	height:29px;
	padding:38px 0;

}
.pack .column_top h1,h2{
	color:#ffffff;
}

.pack .column_top h1{
	font:bold 1.3975em Arial,sans-serif;
	padding-top:4px;
}

.pack .column_top h2{
	font:bold 1.1475em Arial,sans-serif;
	margin-top:-6px;
}

.pack .column_top h2 span{
	font:bold 2.1875em Arial,sans-serif;
}

.column_top{
	height:75px;
	border-radius:5px 5px 0 0;
	text-align: center;
	position: relative;
	z-index: 4;
}

.column_top sup{
	font-size: 1.5em;
}

.first_column{
	background-color:#cbcbcb; 
}

.first_column .column_top{
	background:url(../images/top_bg_grey.png) repeat-x;
}

.pack.first_column .column_top h1{
	color:#e0e0e0;
	font:bold 1.40625em Arial,sans-serif;
	padding:10px 30px 10px 30px;
}

.pack.first_column ul li{
	border-top:1px solid #a2a2a2;
	color:#5c5c5c;
}

.pack.lateral{
	box-shadow:-4px 0px 10px -5px #000;
}

.pack.lateral .column_top{
	background:url(../images/top_bg_blue.png) repeat-x;
}

.pack.third_column{
	background:#ffffff;
	box-shadow: 0 0 10px #000;
	z-index: 5;
}

.pack.third_column .column_top{
	background:transparent url(../images/green_shape.png) no-repeat;
	width:100.54%;
	height:98px;
	top:-20px;
	left:-1px;
}

.pack.third_column ul li:first-child{
	margin-top: -22px;
	border-top: none;
}

.pack.third_column ul li{
	border-top:1px solid #dadada;
}	

.pack.third_column ul li a{
	background-color:#e43a22;
}

@media screen and (min-width:320px) and (max-width:480px){
  .pack{
		width:50%;
		margin-top:20px;
	}

	.pack.third_column .column_top{
	background:transparent url(../images/green_shape.png) no-repeat;
	background-size: 100%;
	height:75px;
	position:static;
	}

	.pack.third_column ul li:first-child{
		margin-top: 0;
	}

	.media ul li{
		padding-left: 0;
	}
	#img_videos,#img_photos,#img_news,#img_schools{
		padding-right: 0;
	}
}
}

<div class="packages">
			<div class="pack first_column">
				<div class="column_top">
					<h1>Pes</h1>
				</div>
				<ul>
					<li>Mo</li>
					<li>Mo</li>
					<li>Eqt</li>
					<li>Cnt</li>
					<li>Ole</li>
					<li>Tes</li>
					<li>Gs</li>
					<li class="last-child"><img src="images/arrow.png" alt="arrow"/></li>
				</ul>
			</div>
			<div class="pack lateral second_column">
				<div class="column_top">
					<h1>Sivkage</h1><h2><sup>$</sup><span></span>0<sub>/mo</sub></h2>
				</div>
				<ul>
					<li>1</li>
					<li>1</li>
					<li><img src="images/yes.png" alt="yes"/></li>
					<li><img src="images/no.png" alt="no"/></li>
					<li><img src="images/no.png" alt="no"/></li>
					<li><img src="images/no.png" alt="no"/></li>
					<li><img src="images/no.png" alt="no"/></li>
					<li class="last-child"><a href="#">SIGN UP</a></li>
				</ul>
			</div>
			<div class="pack third_column">
				<div class="column_top">
					<h1>Gage</h1><h2><sup>$</sup><span>9</span><sub>/mo</sub></h2>
				</div>
				<ul>
					<li>2</li>
					<li>2</li>
					<li><img src="images/yes.png" alt="yes"/></li>
					<li><img src="images/no.png" alt="no"/></li>
					<li><img src="images/yes.png" alt="yes"/></li>
					<li><img src="images/no.png" alt="no"/></li>
					<li><img src="images/yes.png" alt="yes"/></li>
					<li class="last-child"><a href="#">SIGN UP</a></li>
				</ul>
			</div>
			<div class="pack lateral">
				<div class="column_top">
					<h1>Pre</h1><h2><sup>$</sup><span>1</span><sub>/mo</sub></h2>
				</div>
				<ul>
					<li>Unlimited</li>
					<li>Unlimited</li>
					<li><img src="images/yes.png" alt="yes"/></li>
					<li><img src="images/yes.png" alt="yes"/></li>
					<li><img src="images/yes.png" alt="yes"/></li>
					<li><img src="images/yes.png" alt="yes"/></li>
					<li><img src="images/yes.png" alt="yes"/></li>
					<li class="last-child"><a href="#">SIGN UP</a></li>
				</ul>
			</div>
		</div>

Answer 1

你的问题是你的li元素有一个固定的高度。

.pack ul li {
border-top:1px solid #ffffff;
font:normal 0.83875em Arial,sans-serif;
color:#797979;
height:18px;
padding:13px 0;
}

删除它。如果您希望您的包装具有相同的高度，您可以为其添加最小高度：

.pack{
margin-left:-0.483091%;
width:25.483091%;
background-color:#e0e0e0;
border-radius:5px;
float:left;
position: relative;
z-index: 1;
min-height:570px;
}

Answer 2

与此同时，我更换了border-top：none用于1px透明的包装中的第一个li并且它有效。

浮动CSS - 我可能做错了什么

2 个答案: