<div id="main">
<div></div>
<div></div>
<div></div>
</div>
Нужно отобразить блоки #main div
по горизонтали, так, чтобы не переносились на новую строку, если достигли предела ширину блока #main
.
Пробовал float:left; display:inline-block;
<div id="main">
<div></div>
<div></div>
<div></div>
</div>
Нужно отобразить блоки #main div
по горизонтали, так, чтобы не переносились на новую строку, если достигли предела ширину блока #main
.
Пробовал float:left; display:inline-block;
HTML
<div id="main">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
<style>
*{
margin: 0px;
padding: 0px;
}
html, body{
height: 100%;
}
body{
background-color: #ccc;
}
div {
border: 1px solid #fff;
margin:10px;
text-align: center;
}
#main{
width: 1119px;
height: 150px;
overflow: hidden;
}
#main>div{
width: 150px;
height: 120px;
display: inline-block;
}
</style>
не проще ли для всех троих блоков задать ширину и высоту а потом просто добавит ко всем float:left
Очень легко: блокам display: inline-block; родителю white-space: nowrap;. Таким образом мы запрещаем перенос строк.
.main
{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.main__item
{
background: orange;
padding: 10px;
margin-right: 5px;
}
<div id="main" class="main">
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
</div>
.main
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.main__item
{
background: orange;
padding: 10px;
margin-right: 5px;
}
<div id="main" class="main">
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
</div>
upd: с переносом думаю сами додуматесь? :)
.main
{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.main__item
{
background: orange;
padding: 10px;
margin-right: 5px;
}
<div id="main" class="main">
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
<div class="main__item">Вася</div>
<div class="main__item">Петя</div>
<div class="main__item">Миша</div>
<div class="main__item">Сыр</div>
</div>