3 Div時，一個集裝箱，響應

演示：http://jsfiddle.net/LTchE/10/3 Div時，一個集裝箱，響應

HTML：

<body> 
    <div class="wrapper"> 
     <div class="x"></div> 
     <div class="y"></div> 
     <div class="z"></div> 

    </div> 

</body>

CSS：

body, html { 
    height: 100%; 
    margin: 0px auto; 
    padding: 0px auto; 
} 
.wrapper { 
    height: auto; 
    min-height: 100%; 
    margin: 0px auto; 
    padding: 0px auto; 
    max-width: 100%; 
    background: #de291e; 
} 
.x { 
    background: url('http://placehold.it/300x505') no-repeat center; 
    background-size: contain; 
    max-width: 300px; 
    width:100%; 
    height: 505px; 

    display: block; 
    float:left; 
} 
    .y { 
    background: url('http://placehold.it/500x505') no-repeat center; 
    background-size: contain; 
    max-width: 500px; 
    width:100%; 
    height: 505px; 

    display: block; 
    float:left; 
} 
    .z { 
    background: url('http://placehold.it/100x505') no-repeat center; 
    background-size: contain; 
    max-width: 100px; 
    height: 505px; 
    width:100%; 

    display: block; 
    float:left; 
}

我有這樣3個div的屏幕，但調整的窗口時，他們分成新的行...

我想然後繼續在同一行，就像是響應..

任何人都可以幫忙嗎？即時搜索這個小時現在.. :(

（也有可能它們總是匹配屏幕尺寸？）現在的最大值是900px ..但我不知道，也許如果某人有一個巨大的屏幕，以適應它）

來源

2016-01-22 Vitor Dias

你可以把你想要的最終結果的圖片？ – Gislef

你需要以百分比工作。

你的包裝是100％，你有3個div並排在包裝內。那些3周的div需要等於100％，所以第一個div可以爲40％，第二個50％，而剩下的10％（只是玩，直到你得到你喜歡什麼）

body, html { 
    height: 100%; 
    margin: 0px auto; 
    padding: 0px auto; 
} 
.wrapper { 
    height: auto; 
    min-height: 100%; 
    margin: 0px auto; 
    padding: 0px auto; 
    max-width: 100%; 
    background-color: white; 
} 
.x { 
    background-color:green; 
    width:40%; 
    height: 505px; 
    float:left; 
} 
    .y { 
    background-color:blue; 
    width:50%; 
    height: 505px; 
    float:left; 
} 
    .z { 
    background-color:red; 
    height: 505px; 
    width:10%; 
    float:left; 
}

來源

2016-01-22 03:15:26

解決<3謝謝我不得不使用像27.23％瘋狂百分比對齊，但它的工作 –

問題是寬度在你的div的CSS，你的代碼說的是，充分考慮到給父母的可能假設1000px與width:100%但另一方面你設置了max-width:300px的限制，所以它想要在屏幕上取得全寬，即1000px但max-width限制爲300px所以它看起來像一切工作正常，但有一個衝突在你的CSS是不可知的，然後你只是調整你的窗口div移動到下一行，因爲沒有足夠的空間。基本上你所要做的就是給它一個實際需要的寬度。

像我給所有3個div值width:33%，而不是單獨給他們所有人100%和代碼工作正常。

來源

2016-01-22 03:18:29

3 Div時，一個集裝箱，響應

回答

相關問題