Почему изображения не появляются один за другим?

Я хочу иметь divs с встроенным в класс образ-1 внутри div, имеющего класс обертки изображения. Но я пробовал много, но divs с классом image-1 не попадают в строку. Могу я узнать, где я делаю ошибку?Почему изображения не появляются один за другим?

<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) Удалите float:left от изображения-1 элементов

2) Набор white-space:nowrap; на изображении-обертку

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

Divs с class="image-1" имеет ширину установлена на 100% от их родительского элемента (class="image-wrapper").

Если вы хотите плавать три изображения/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% (потому что я хочу показать вам, как подмигнули действительно работает, вы можете вернуться назад на 100%) и прокомментировал переполнение по той же причине. Вы можете вернуть это свойство обратно.

источник

2014-11-09 08:44:35 panther

Вы должны set width от .image-1 до 33.3%. Ширина вычисляется относительно родителя, который в этом случае равен .image-wrapper.

Смотрите эту JSFiddle

источник

2014-11-09 08:46:43 nisargjhaveri

Общей ширину ребенок дива превышает ширину родительских див.

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

Почему изображения не появляются один за другим?

ответ

Смежные вопросы