間違ったアラインメント - css

Question

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 
} 

あなたが右の光景その正確に整合していない上で見ることができるように..

私は別のものを試しましたが、私は固執します。私は幅、位置などを修正しようとしましたが、何も助けられませんでした。あなたが正しい方向に私を得ることができたら幸いです。ありがとう。応答グリッドの

Answer 1

、私は4系統、3つのグリッド及び2つのグリッド

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

 
/* COLUMN SETUP */ 
 
.col { 
 
\t display: block; 
 
\t float:left; 
 
\t 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 { 
 
\t width: 100%; 
 
} 
 
.span_1_of_2 { 
 
\t 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) { 
 
\t .col { margin: 1% 0 1% 0%; } 
 
\t .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } 
 
} 
 

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

 
/* GO FULL WIDTH BELOW 480 PIXELS */ 
 
@media only screen and (max-width: 480px) { 
 
\t .col { margin: 1% 0 1% 0%; } 
 
\t .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) { 
 
\t .col { 
 
\t \t margin: 1% 0 1% 0%; 
 
\t } 
 
} 
 

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

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

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

 

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