爲什麼我的Div元素不會排隊？

Question

我已經通過論壇，似乎已嘗試所有有關div佈局的建議。我試圖獲得兩行元素，如下所示： 第1行 - 數字>圖像>文本。 第2行 - （空格將第二行向右移動與上圖相同數量的像素）> Number> Image> Text。

這是我的代碼，我試過到目前爲止：

@import url(http://fonts.googleapis.com/css?family=Londrina+Sketch); 
 

 
body { 
 
    background-color: #f3eedd; 
 
    width: 750px; 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
} 
 

 
h1 { 
 
    font-family: 'Londrina Sketch', cursive; 
 
    color: #c13e18; 
 
    font-size: 50px; 
 
    text-align: center; 
 
    margin: 0px 30px 0px 30px; 
 
} 
 

 
h2 { 
 
    font-size: 20px; 
 
    color: #c13e18; 
 
    margin: 10px 30px 10px 30px; 
 
} 
 

 
h3 { 
 
    font-size: 20px; 
 
    margin: 30px 30px 0px 30px; 
 
} 
 

 
h4 { 
 
    text-align: center; 
 
} 
 

 
p { 
 
    font-size: 20px; 
 
    margin: 0px 30px 0px 30px; 
 
} 
 

 
.choose {} 
 

 
.number { 
 
    display:inline-block; 
 
    float:left; 
 
} 
 

 
.choose-image { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.choose-text { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    float: left; 
 
} 
 

 
.customise {} 
 

 
.empty-left { 
 
    display: inline-block; 
 
    width: 300px; 
 
    overflow: hidden; 
 
} 
 

 
.customise-image { 
 
    display: inline-block; 
 
} 
 

 
.customise-text { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<h1>FROM BEGINNING TO END</h1> 
 
<hr> 
 
<h2>How many? What size? How old? When and why? How much? 
 
    If you’d like to learn more about group sizes, room dimensions, prices & age limits … this section must have your answer! However if you can’t find it, please don’t hesitate to drop us a line!</h2> 
 
<hr> 
 
<!-- choose --> 
 
<div class="choose"> 
 
    <div class="number"> 
 
    <h4>1</h4> 
 
    </div> 
 
    <div class="choose-image"> 
 
    <img src="http://www.challenge-the-box.com/wp-content/uploads/choose.png" alt="" /> 
 
    </div> 
 
    <div class="choose-text">Choose text content goes here</div> 
 
</div>​ 
 
<div class="customise"> 
 
    <div class="empty-left"></div> 
 
    <div class="number"> 
 
    <h4>2</h4> 
 
    </div> 
 
    <div class="customise-image"> 
 
    <img src="http://www.challenge-the-box.com/wp-content/uploads/customise.png" alt="" /> 
 
    </div> 
 
    <div class="customise-text">Customise text content goes here</div> 
 
</div>

謝謝！

Answer 1

我不是很確定你要實現你的代碼是什麼。我會讓你進入我的一個小祕密;）

我稱之爲拆分，我可以拆分成多個列和行。

這裏是我的CSS

.clearfix:after{clear:both;content:'';visibility:hidden;display:block;} 
/*because floats have to be cleared. I use a simple clarify method 
    although this may cause problems in IE <8 
*/ 
@media only screen and (min-width:600px){/*use this if you want the elements to only be in columns for desktop computers.*/ 
    .split .splitOb{float:left;padding:1%;} 
    .splitOb.w1{width:8%;} 
    .splitOb.w2{width:18%;} 
    .splitOb.w3{width:28%;} 
    .splitOb.w4{width:38%;} 
    .splitOb.w5{width:48%;} 
    .splitOb.w6{width:58%;} 
    .splitOb.w7{width:68%;} 
    .splitOb.w8{width:78%;} 
    .splitOb.w9{width:88%;} 
} 

的使用這個想法，只是用這個基本結構。

<div class="split clearfix"> 
    <div class="splitOb w5"> 
     this is on the left side 
    </div> 
    <div class="splitOb w5"> 
     this is the right side 
    </div> 
</div> 

請記住，所有splitOb或split對象必須等於10.您可以對此進行不同的變化，甚至可以顛倒行的順序。

數學有點幫助:)

與比例，要等於100％。無論父母的寬度如何，具有width:100%;的子元素將等於父母的100％。

因此，讓我們說我使用上面的例子，有2 .splitOb.w5所以這是48％x 2 = 96％，現在每邊1％的填充。 1％x 4 = 4％。 4％+ 96％= 100％。這與所有其他寬度相同。

此外，儘量不要在身體上使用像素寬度。我說這是因爲有很多不同的比例，從320px x 400px到1440px x 900px以及更大！

使用視口幫助您獲得設備的寬度

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

，如果你這樣做這將意味着：

body,html{width:100%;margin:0px;padding:0px;} 

正文和HTML將設備的或瀏覽器的100％寬度。

Answer 2

u有一個錯字：

.number (
display: inline-block; 
float: left; 
} 

變化：

.number { 
    display: inline-block; 
    float: left; 
    } 

後它`糾正它看起來不錯，我認爲。

在您的網站，更改此：

.customise { 
    float: left; 
    width: 100%; 
} 

.choose { 
    float: left; 
    width: 100%; 
} 

到：

.customise { 
     float: left; 
     width: 50%; 
} 

.choose { 
     float: left; 
     width: 50%; 
    } 

Answer 3

Currently change add below style 

    .choose { 
     width: 50%; float: left; 
     }​ 

     .customise { 
      width: 50%; 
      float: left; 
     }​ 


<!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <style> 
     @import url(http://fonts.googleapis.com/css?family=Londrina+Sketch); 

     body { 
     background-color: #f3eedd; 
     width: 750px; 
     overflow:scroll; 
     overflow-x:hidden; 
     } 
     h1 { 
     font-family: 'Londrina Sketch', cursive; 
     color: #c13e18; 
     font-size: 50px; 
     text-align: center; 
     margin: 0px 30px 0px 30px; 
    } 

    h2 { 
     font-size: 20px; 
     color: #c13e18; 
     margin: 10px 30px 10px 30px; 
    } 

     h3 { 
     font-size: 20px; 
     margin: 30px 30px 0px 30px; 
    } 

    h4 { 
    text-align: center; 
    } 

     p { 
     font-size: 20px; 
     margin: 0px 30px 0px 30px; 

    } 

    .choose { 
    width: 50%; float: left; 
    }​ 

    .number (
    display: inline-block; 
    float: left; 


    } 

    .choose-image { 
    display: inline-block; 
    float: left; 

    } 

    .choose-text { 
    display: inline-block; 
    vertical-align: top; 
    float: left; 

    } 

    .customise { 
     width: 50%; 
     float: left; 
    }​ 

    .empty-left { 
    display: inline-block; 
    width: 300px; 
    overflow: hidden; 

    } 

    .customise-image { 
    display: inline-block; 

    } 

    .customise-text { 
    display: inline-block; 
    vertical-align: top; 

    } 


    </style> 
    </head> 
    <body> 

    <h1>FROM BEGINNING TO END</h1> 
    <hr> 
    <h2>How many? What size? How old? When and why? How much? 
    If you’d like to learn more about group sizes, room dimensions, prices & age limits … this section must have your answer! However if you can’t find it, please don’t hesitate to drop us a line!</h2> 
    <hr> 
    <!-- choose --> 
    <div class="choose"> 
    <div class="number"><h4>1</h4></div> 
    <div class="choose-image"> 
    <img src="http://www.challenge-the-box.com/wp-content/uploads/choose.png" alt="" /></div> 
    <div class="choose-text">Choose text content goes here</div> 
    </div>​ 
    <div class="customise"> 
    <div class="empty-left"></div> 
    <div class="number"><h4>2</h4></div> 
    <div class="customise-image"> 
    <img src="http://www.challenge-the-box.com/wp-content/uploads/customise.png" alt="" /></div> 
    <div class="customise-text">Customise text content goes here</div> 
    </div> 
    <!-- customise --> 
    </body> 
    </html> 

Answer 4

嘗試display: table或者只是創建一個表格，除非你關心語義。我不知道是什麼的空間是這裏的DEMO

我做了另外一個版本沒有這種空間看起來很多better