Какой CSS код для расположения div в ряд с переносом строк?
Подскажите, есть ли способ расположить div'ы с текстами таким образом:
[div][div][div с длинным
текстом]
Все что пробовал, дают либо такой:
[div][div]
[div с длинным текстом]
либо такой
[div][div][div с длинным
_________текстом]
результат.
Дополнительно:
заменить div на span или дать ему display: inline
display: inline !important; приводит к такому результату:
[div]
[div]
[div с длинным текстом]
я в своем css перечислил все классы, которые имеют отношение к выводу этого div, но ничего не меняется.
Ответы:
https://codepen.io/FragsterAt/pen/MWZOdKg
- Я понимаю, что так должно работать. Но у меня конкретно в данном случае не работает.(
Возможно ли, что проблема в том, что внутри div еще кое-какие элементы? Т.е. структура примерно такая<div> <div> <ul> <li> </li> </ul> </div> <div> <ul> <li> </li> </ul> </div> <div> <ul> <li> Длинный текст </li> </ul> </div> </div>
<div> <div> <ul> <li> </li> </ul> </div> <div> <ul> <li> </li> </ul> </div> <div> <ul> <li> Длинный текст </li> </ul> </div> </div>
- Azat2015, да, ul и li тоже блочные элементы
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы расположить несколько div элементов в ряд с переносом строк, можно использовать свойство CSS display: inline-block; для каждого div элемента. Это позволит элементам выстраиваться в ряд, при этом каждый элемент будет занимать только необходимое для своего содержимого место, и при достижении ширины контейнера переноситься на новую строку.
Пример кода на HTML и CSS:
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
.container { width: 100%; /* Ширина контейнера */ } .box { display: inline-block; /* Устанавливаем блоки в ряд */ width: 30%; /* Ширина каждого блока */ margin: 10px; /* Внешний отступ между блоками */ padding: 10px; /* Внутренний отступ внутри блока */ border: 1px solid #ccc; /* Граница блока */ }
В данном примере установлены блоки в ряд с помощью свойства display: inline-block; и заданы необходимые стили для каждого блока. Можно изменить ширину блоков, отступы и другие свойства, чтобы добиться нужного визуального эффекта.