Yanlış hizalama - css

Question

3 sütunlu bir satırdaki hizalarımda ve 2 sütunlu başka bir satırda sorun yaşıyorum. Eğer benim ekran üzerinde görebileceğiniz gibi

: doğru hizalanmış değil onun sağ görüşte görebileceğiniz gibi ..

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 
} 

: Burada

Wrong alignment tüm sütunlar için benim kodudur

Farklı şeyler deniyorum ama sıkışıp kaldım. Ben genişlik, pozisyon ve benzeri değiştirmeye çalışıyorum ama hiçbir şey yardımcı değil.Hayır beni doğru yönde alabilirsiniz ..? Herhangi bir yardım için teşekkür ederiz. Teşekkürler. Duyarlı ızgaraları için

Answer 1

, ben ... 4 ızgara ile 3 çizgiler, 3 ızgaralar ve 2 ızgaralar

/* 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>