Как я могу растянуть Div в соответствии с содержимым
у меня проблема с автоматической шириной для div, я не хочу давать div статическую ширину, я хочу, чтобы он автоматически устанавливал свою ширину, чтобы соответствовать содержимому внутри него. я пытаюсь создать div с 3 списками, я сделал списки (элемент ul) flex-column-wrap я хочу, чтобы растяжка div соответствовала спискам, если в списке больше столбца автоматически.
Это мой фрагмент кода:
* {
margin: 0;
padding: 0;
}
body {
position: relative;
height: 100vh;
width: 100%;
background-color: beige;
}
.link-list {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
background-color: aquamarine;
display: flex;
justify-content: space-around;
height: 200px;
max-width: 90%;
gap: 30px;
}
.inner-list {
width: fit-content;
display: flex;
flex-direction: column;
}
.inner-list ul {
list-style: none;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
width: fit-content;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "test.css">
</head>
<body>
<div class = "list">
<div class = "inner-list">
<h6 class = "inner-list-title">Title</h6>
<ul>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
</ul>
</div>
<div class = "inner-list">
<h6 class = "inner-list-title">Title</h6>
<ul>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark social </a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark social </a></li>
</ul>
</div>
<div class = "inner-list">
<h6 class = "inner-list-title">Title</h6>
<ul>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
</ul>
</div>
</div>
</body>
</html>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
58
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Вы можете сделать это, используя display: inline-table; вместо flex и width: 30%;
.inner-list{
width: 30%;
display: inline-table;
}
*{
margin: 0;
padding: 0;
}
body{
position: relative;
height: 100vh;
width: 100%;
background-color: beige;
}
.link-list{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
background-color: aquamarine;
display: flex;
justify-content: space-around;
height: 200px;
max-width: 90%;
gap: 30px;
}
.inner-list{
width: 30%;
display: inline-table;
}
.inner-list ul{
list-style: none;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
width: fit-content;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "test.css">
</head>
<body>
<div class = "list">
<div class = "inner-list">
<h6 class = "inner-list-title">Title</h6>
<ul>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
</ul>
</div>
<div class = "inner-list">
<h6 class = "inner-list-title">Title</h6>
<ul>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark social </a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark social </a></li>
</ul>
</div>
<div class = "inner-list">
<h6 class = "inner-list-title">Title</h6>
<ul>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
</ul>
</div>
</div>
</body>
</html> Ответ принят как подходящий
Во Flexbox есть несколько известных ошибок, и одна из них возникает при использовании flex-flow: column wrap. Некоторые браузеры неправильно определяют размер контейнера в зависимости от его содержимого, что может привести к нежелательному переполнению. Чтобы обойти это, вы можете настроить контейнер так, чтобы он отображал: flex и flex-direction: row со статической высотой, например:
При использовании flex-flow: обтекание столбца некоторые браузеры неправильно определяют размер контейнера в зависимости от его содержимого, что приводит к нежелательному переполнению.
Обходной путь
Чтобы устранить поведение flex: column, вы можете использовать вместо него flex-flow: row wrap (обратите внимание на использование строки вместо столбца). Чтобы сымитировать поведение столбца, вы можете обновить режим записи контейнера (и сбросить его для элементов), например:
.list {
display: flex;
flex-direction: row;
height: 200px;
}
и разрешите flex: column с помощью flex-flow: row переноса (обратите внимание на строку вместо столбца) и подделайте поведение столбца, обновив режим записи контейнера (и сбросив его для элементов).
.inner-list {
width: fit-content;
display: flex;
flex-direction: column;
}
.inner-list ul {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
width: fit-content;
writing-mode: vertical-lr;
}
.inner-list li {
writing-mode: horizontal-tb;
padding: 0 6px;
}
Пример
Вот полный пример кода и демо, которые должны вам подойти.
* {
margin: 0;
padding: 0;
}
body {
position: relative;
height: 100vh;
width: 100%;
background-color: beige;
}
.list {
display: flex;
flex-direction: row;
height: 200px;
}
.link-list {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
background-color: aquamarine;
display: flex;
justify-content: space-around;
height: 200px;
max-width: 90%;
gap: 30px;
}
.inner-list {
width: fit-content;
display: flex;
flex-direction: column;
}
.inner-list ul {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
width: fit-content;
writing-mode: vertical-lr;
}
.inner-list li {
writing-mode: horizontal-tb;
padding: 0 6px;
}<div class = "list">
<div class = "inner-list">
<h6 class = "inner-list-title">Title</h6>
<ul>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
</ul>
</div>
<div class = "inner-list">
<h6 class = "inner-list-title">Title</h6>
<ul>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark social </a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">sark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark social </a></li>
</ul>
</div>
<div class = "inner-list">
<h6 class = "inner-list-title">Title</h6>
<ul>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
<li><a href = "#">Dark</a></li>
</ul>
</div>
</div>Другие вопросы по теме
Правильный способ настройки различных компонентов из React MUI?
Центральный элемент внизу экрана для тоста
Храбрый браузер: CSS-анимация не работает (но работает в Firefox)
Есть ли способ отобразить весь контент без прокрутки в случае разной высоты экрана?
Как заставить анимацию CSS замедляться, останавливаться при наведении и продолжать бесконечно двигаться при отпускании мыши?
Изменение цвета подстроки из строки в реакции
Flexbox не дает одинаковую ширину всем элементам, даже если flex-shrink и flex-grow установлены на 0
Могу ли я показать содержимое ТД сверху?
InnerHTML, чтобы показать значение в Интернете
Анимация сканера отпечатков пальцев в CSS
Похожие вопросы
Сортировать html-таблицу по алфавиту и по номерам
Хьюго: добавление http-equiv="refresh" content="0 при сборке. Остановить это?
Храбрый браузер: CSS-анимация не работает (но работает в Firefox)
Есть ли способ отобразить весь контент без прокрутки в случае разной высоты экрана?
HTML-форма не запускает прослушиватель событий «отправить» при отправке формы
Скрыть/показать сброс div после обновления страницы
Удалить весь текст из узла html с помощью регулярного выражения
Как я могу решить «Внутреннюю ошибку сервера 500» при импорте модулей в __init__.py?
Как отобразить изображение, на которое я нажимаю, в моем модальном окне?
Изменение цвета подстроки из строки в реакции
Разве OP не сказал, что они «не хотят придавать div статическую ширину» и «хотят, чтобы он автоматически устанавливал свою ширину» [так в оригинале]?