錯誤的對齊-css

-1

我有一列有3列，另一列有2列的排列有問題。錯誤的對齊-css

就像你可以在我的截圖中看到：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 
}

正如你可以在右邊的視線沒有正確對齊看..

我嘗試了不同的事情，但我被困住了。我嘗試修改寬度，位置等，但沒有任何幫助。希望你可以讓我在正確的方向..？欣賞任何幫助。謝謝。

來源

2016-04-13 s.sierra

育... ...引擎收錄你的嵌入代碼，包括你的HTML。 –

如果您使用https://jsfiddle.net/，以便我們擁有HTML和CSS – DanyCode

完成https://jsfiddle.net/1Lcdye4f/，則更容易。謝謝。 –

爲響應網格，我的代碼，以顯示3行，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>

來源

2016-04-13 20:53:31 mlegg

錯誤的對齊-css

回答

相關問題