爲什麼圖像不會一個接一個地來？

我想要在div中包含class image-1的div。但我已經嘗試了很多，但類圖像-1的div沒有獲得內聯。我可以知道我在哪裏做錯了嗎？爲什麼圖像不會一個接一個地來？

<style> 
*{ 
    margin:0; 
    padding:0; 
} 
.wrapper{ 
    width:100%; 
    height:400px; 
    background-color:#666; 
    padding:5px; 
    box-sizing:border-box; 
    overflow-x:hidden; 
} 
.image-wrapper{ 
    width:300%; 
    height:390px; 
    background-color:#000; 
} 
.image-1{ 
    width:100%; 
    height:100%; 
    background-color:#03F; 
    float:left; 
    display:inline-block; 
} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="image-wrapper"> 
     <div class="image-1"> 
     </div> 
     <div class="image-1"> 
     </div> 
     <div class="image-1"> 
     </div> 
    </div> 
</div> 
</body>

來源

2014-11-09 user3542577

1）從圖像-1元素

2）上的圖像的包裝器設置white-space:nowrap;的float:left

FIDDLE

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.wrapper { 
 
    height: 400px; 
 
    background-color: #666; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 
.image-wrapper { 
 
    height: 390px; 
 
    background-color: #000; 
 
    white-space: nowrap; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
} 
 
.image-1 { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #03F; 
 
    display: inline-block; 
 
} 
 
.image-1 + .image-1 { 
 
    background-color: wheat; 
 
} 
 
.image-1 + .image-1 + .image-1 { 
 
    background-color: tomato; 
 
}

<div class="wrapper"> 
 
    <div class="image-wrapper"> 
 
    <div class="image-1"> 
 
    </div> 
 
    <div class="image-1"> 
 
    </div> 
 
    <div class="image-1"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2014-11-09 08:46:09 Danield

感謝它爲我工作 – user3542577 2014-11-09 09:32:17

與class="image-1" Div的已寬度設置爲它們的父元素（class="image-wrapper"）的100％。

如果你想浮動三個圖像/ divs，設置他們width: 33.3%（的父寬度）。

例如，數字：

.wrapper has width 300px 
.image-wrapper has width 900px (300% of 300px) 
.image-1 has width 900px (100% of 900px above)

鏈接撥弄：http://jsfiddle.net/8bg8mw53/

我設置有包裝器寬度的20％（因爲我想告訴你it's如何工作，你可以返回在那裏返回100％）並評論溢出，出於同樣的原因。你可以返回這個屬性。

來源

2014-11-09 08:44:35 panther

你應該設置width的.image-1至33.3%。寬度計算與父母相關，在本例中爲.image-wrapper。

看到這個JSFiddle

來源

2014-11-09 08:46:43 nisargjhaveri

總寬度的孩子的div超過父的div的寬度。

*{ 
    margin:0; 
    padding:0; 
} 
.wrapper{ 
} 
.image-wrapper{ 
    width: 300px; 
    background: #fff; 
    white-space: nowrap; 
} 
.image-1{ 
    height: 100px; 
    width: 100px; 
    background: #eaeaea; 
    display: inline-block; 
    position:relative; 
    border-radius:5px; 
}

小提琴here

來源

2014-11-09 08:51:27 Rasel

爲什麼圖像不會一個接一個地來？

回答

相關問題