1
<div id="main">
<div></div>
<div></div>
<div></div>
</div>

Нужно отобразить блоки #main div по горизонтали, так, чтобы не переносились на новую строку, если достигли предела ширину блока #main.

Пробовал float:left; display:inline-block;

7
  • а можно поподробнее о условиях? если есть возможность, можно задать ширину в которую помещаются блоки, ну или вариант задать ширину для div в процентах
    – user12902
    2 апр 2014 в 2:12
  • Ширина же задана для #main, когда вложенные блоки div достигают предела ширину в 1119px блок спозлает снизу и в левый край.
    – Jony
    2 апр 2014 в 2:21
  • попробуй div{width:33%;}
    – user12902
    2 апр 2014 в 2:26
  • и что это даст? у меня количество блоков вложенных не обязательно 3
    – Jony
    2 апр 2014 в 2:28
  • #main{display:table;} div{display:table-cell}
    – user12902
    2 апр 2014 в 2:30

4 ответа 4

2

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>

Пример

1
  • Вы плохо прочитали мой вопрос, сейчас это сделано, но это не решает проблему. Добавьте в ваш пример по ссылке - еще 5 блоков и проиндексируйте - увидите, что не поместившиеся блоки съехали в невидимую область слева.
    – Jony
    2 апр 2014 в 16:13
0

не проще ли для всех троих блоков задать ширину и высоту а потом просто добавит ко всем float:left

0

Очень легко: блокам display: inline-block; родителю white-space: nowrap;. Таким образом мы запрещаем перенос строк.

0

Решение без переноса:

.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.