错误的对齐方式 - css答案

【问题标题】：Wrong alignment - css错误的对齐方式 - css
【发布时间】：2016-04-14 04:53:31
【问题描述】：

我对一行 3 列和另一行 2 列的对齐有问题。

就像你在我的截图上看到的那样：Wrong alignment

这是我所有列的代码：https://jsfiddle.net/1Lcdye4f/

#responsive-form{
max-width:1050px 
margin:0 auto;
width:100%;
}

.form-row{
width: 100%;
}

.column-four{
 float: left;
 position: relative;
 padding: 0.65rem;
 width:25%;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box
 }

.column-third{
float: left;
position: relative;
padding: 0.65rem;
width:33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}


.column-half{
float: left;
position: relative;
padding: 0.65rem;
width:50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
 }

正如您在右侧看到的那样，它没有正确对齐..

我尝试了不同的东西，但我被卡住了。我尝试修改宽度、位置等，但没有任何帮助。希望你能让我朝着正确的方向前进……？感谢任何帮助。谢谢。

【问题讨论】：

Yuk... pastebin... 嵌入您的代码并包含您的 HTML。
如果你使用jsfiddle.net 会更容易，这样我们就有 HTML 和 CSS
完成jsfiddle.net/1Lcdye4f。谢谢。
抱歉，用那个小提琴我们什么也做不了！如果您使用 JS，则必须将其放入

标签： css alignment

【解决方案1】：

对于响应式网格，我有代码显示 3 行，4 个网格，3 个网格和 2 个网格

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}


@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}

<div class="section group">
	<div class="col span_1_of_4">
	1 of 4
	</div>
	<div class="col span_1_of_4">
	1 of 4
	</div>
	<div class="col span_1_of_4">
	1 of 4
	</div>
	<div class="col span_1_of_4">
	1 of 4
	</div>
</div>

<div class="section group">
	<div class="col span_1_of_3">
	This is column 1
	</div>
	<div class="col span_1_of_3">
	This is column 2
	</div>
	<div class="col span_1_of_3">
	This is column 3
	</div>
</div>


<div class="section group">
	<div class="col span_1_of_2">
	This is column 1
	</div>
	<div class="col span_1_of_2">
	This is column 2
	</div>
</div>

【讨论】：