html - 从三分之一列到二分之一列

Question

我正在尝试制作一个图像和描述列表，这些图像和描述以较大宽度为一组，然后转到以较小宽度为一组的图像和描述。但是当我分解时它变得非常困惑，我不知道该怎么做才能让它分解成干净的二分之一列。预先感谢您的帮助!

div.thirds {
	padding-bottom: 20px;
	padding: 50px;
	text-align: center;
	font-family: Gudea;
}

div.button1 {
	width:90px;
	height:40px;
	margin-left: 38%;
}

div.one-third {
	width: 30%;
	float: left;
	margin-right: 5%;
	text-align: center;
	font-family: Gudea;
}

div.button2 {
	width:90px;
	height:40px;
	margin-left: 38%;
}

div.one-third-last {
	margin: 0;
	text-align: center;
	font-family: Gudea;

}

div.button3 {
	width:90px;
	height:40px;
	margin-left: 38%;
}

@media (maxwidth:900px;)
div.one-third {
	width: 47.5%;
}

div.one-third-second {
	margin: 0;
}

div.one-third-last {
	clear: both;
	float: none;
	width: auto;
	padding: 20px 0 0 0;
}

div.one-third {
	width: 47.5%;
}

div.one-third-second {
	margin: 0;
}

div.one-third-last {
	clear: both;
	float: none;
	width: auto;
	padding: 20px 0 0 0;
}

<div class="thirds clearfix">
	
	<!-- one-third -->
	<div class="one-third mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird on a fence" />
		<h2>The Trainer</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button1">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
	<!-- one-third -->
	<div class="one-third one-third-second mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird eating" />
		<h2>Lessons</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button2">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
	<!-- one-third -->
	<div class="one-third one-third-fourth mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A cat" />
		<h2>Training</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button3">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
</div><!--/thirds-->

<!-- thirds -->
<div class="thirds clearfix">
	
	<!-- one-third -->
	<div class="one-third mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird on a fence" />
		<h2>The Trainer</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button1">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
	<!-- one-third -->
	<div class="one-third one-third-second mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird eating" />
		<h2>Lessons</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button2">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
	<!-- one-third -->
	<div class="one-third one-third-last mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A cat" />
		<h2>Training</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button3">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
</div>

Answer 1

我确定您的问题在于混合百分比和固定值。尝试并以 100% 的可玩性来思考。例如，如果您的宽度为 48%，固定边距为 100px，如果 100px 大于您剩下的 2% 会发生什么。问题。就是这样。