Float CSS Positioning

Question

Я пытаюсь выровнять несколько изображений в одной строке. Для этой задачи я использую float:left. Проблема заключается в том, что изображения большие, а браузер показывает их во многих строках. Как я могу сделать, чтобы заказать несколько элементов html в одной строке, несмотря на это недостаточно места?

Thanks

Answer 1

Вы можете обернуть вокруг родительский DIV изображений и установить white-space:nowrap; свойства этого дела.

<div id="parent"> 
    <img src="" width="300" height="300" /> 
    <img src="" width="300" height="300" /> 
    <img src="" width="300" height="300" /> 
    <img src="" width="300" height="300" /> 
    <img src="" width="300" height="300" /> 
</div> 

#parent{ 
    white-space: nowrap; 
} 

Просмотреть рабочие fiddle.

Answer 2

Проверьте нижеследующий ссылку.

Fiddle

div { 
    text-align: justify; 
} 

div img { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
} 

div:after { 
    content: ''; 
    display: inline-block; 
    width: 100%; 
}