css 如何根据内容进行分区拉伸

ecbunoof 于 2023-04-08 发布在其他

关注(0)|答案(2)|浏览(130)

我有一个问题与自动宽度为一个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>

i want to make like this

css

来源：https://stackoverflow.com/questions/75911926/how-can-i-make-a-div-stretch-according-to-content

2条答案

按热度按时间

6yoyoihd1#

Flexbox有一些已知的bug，其中一个在使用flex-flow: column wrap时发生。一些浏览器不会根据容器的内容正确调整容器的大小，这可能会导致不必要的溢出。要解决这个问题，您可以设置容器显示：挠曲和挠曲方向：具有静态高度的行，如下所示：
使用柔性流时：列换行时，某些浏览器不能根据容器的内容正确调整容器的大小，并且会出现不必要的溢出。
参考：https://github.com/philipwalton/flexbugs#flexbug-14

变通方案

要解决flex: column行为，可以使用flex-flow: row wrap（注意使用行而不是列）。要伪造列行为，可以更新容器的写入模式（并在项目上重置它），如下所示：

.list {
  display: flex;
  flex-direction: row;
  height: 200px;
}

并通过使用flex-flow: row wrap（注意行而不是列）解析flex: column，并通过更新容器的写入模式（并在项上重置）伪造列行为。

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

赞(0）回复(0）举报 2023-04-08

sqxo8psd2#

您可以使用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>

赞(0）回复(0）举报 2023-04-08

我来回答

css 如何根据内容进行分区拉伸

2条答案

变通方案

示例

相关问题

热门标签

最新问答