Содержание
Подскажите, пожалуйста, как можно расположить несколько div-ов в одну строку таким образом, чтобы даже в том случае, если их общая ширина превышала ширину контейнера, они всё равно не переносились на новую строку, а просто происходила обрезка не помещающихся div-ов.
4 ответа 4
Есть много вариантов, в зависимости от того, как нужно отображать сами блоки. Один с вариантов:
На мой взгляд, самое нормальное решение:
Я использовал у себя эту часть:
и все заработало.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.
Связанные
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.12.20.35703
Очень часто при вёрстке сайта появляется необходимость прописать блоки div по горизонтали, или по-иному сделать блоки div в ряд.
Это делается просто и для осуществления мы внедрим для блоков нужные параметры в css , которые и сделают наши блоки div в одну строку.
Первый вариант блоки div по горизонтали.
Здесь мы будем использовать для выравнивания по горизонтали div, как в прочем и для других html элементов, параметр display со значением inline-block . То есть расположим наши блоки в ряд друг за другом.
Чтобы расположение блоков было очевидным, я прописал для них рамку из точек и придал им разный цвет.
Допустим, мы имеем 3 блока с некой текстовой информацией разной величины в каждом из них и нам необходимо расположить эти блоки в один ряд таким образом, чтобы при любом разрешение экрана ( даже самого маленького ) наши div находились строго в одной строке.
Для этого создадим родительский контейнер
В этом примере я каждому блоку из 3 задал ширину width по 33% , и тем самым они будут располагаться в один ряд при любом раскладе.
Если вам будет нужно указать каждому блоку свою фиксированную ширину в px , то знайте, что последние блоки с края будут перескакивать на другую строку, если они вместе не поместятся по ширине.
Описание прописанных значений для DIV
- width: calc(33% — 24px); — когда задаётся внешний отступ margin , то браузер приплюсовывает это значение к указанной ширине и соответственно ширина блока по факту станет уже больше прописанной. Для этого мы и используем эту конструкцию записи: отнимаем от заявленной ширины суммарное значение внешнего отступа по горизонтали.;
- display: inline-block; — выравниваем блоки в один ряд друг за другом;
- box-sizing: border-box; — при этом значение учитывается вся ширина блока ( padding + border ). Старайтесь ставить это значение для всех блоков DIV и не промахнётесь.
Второй вариант: блоки div в один ряд.
А в этом варианте мы рассмотрим конкретный пример, когда каждый блок имеет разную по длине текстовую информацию, и нам нужно выровнить эти все блоки между собой по горизонтали по верхней оси, нижней оси или по центру.
Для решения этой задачи на нужно внедрить одно css правило:
vertical-align: top | middle | bottom ;
И в данном примере блоки div выровнены по верхней оси, то есть использовано значение top .
Дивы, которые нуно раместить в ряд, размещаем внутри блока со следующим css-правилом
display: table;
А самим дивам задаем
display: table-cell;
В чем плюс подхода: нету пробелов между блоками, все приемущества таблиц.
При этом в диве, который задан с display: table желательно больше ничего не располагать.
Это имитация таблиц на css для блочных элементов.
Можно сделать на родной таблице через элементы table, tr, td.
Почитайте просто свойства display: table, display: table-cell, display: table-row.