Question

我是一名CSS / HTML自动学习者，如果我的问题很愚蠢，请道歉。

我想要一个最小40％的div，其内容合理，但是当这个div中添加更多项目时，其宽度会相应增加。

这是我到目前为止所做的：

.hcontainerbutton {
    display: flex;
    width: 40%;
    background-color: blue;
    align-items: center;
    justify-content: space-around;
    right: 30%;
    left: 30%;
    position: absolute;
    bottom: 0!important;
}

如果我添加更多项目，那么width:40%或min-width:40%

都不会增长

2 个答案:

答案 0 :(得分：2)

答案 1 :(得分：0)

Answer 1

将.hcontainerbutton包裹在容器中，并对其应用flexbox和height属性。这可用于定位.hcontainerbutton而不是position: absolute。
将min-width值添加到.hcontainerbutton

您可以通过添加和删除.content div并全屏查看来测试此布局。

＆＃13;

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  height: 100vh;
}

.hcontainerbutton {
  min-width: 40%;
  background-color: blue;
  display: flex;
  justify-content: space-around;
  margin-top: auto;
}

.content {
  background: pink;
  width: 100px;
  height: 100px;
}

＆＃13;

<div class="container">
  <div class="hcontainerbutton">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

＆＃13;

Answer 2

根据您的要求，这可以通过普通的CSS本身来完成，您不需要灵活处理，以下是对所做的事情的解释。

首先我们设置html和body标记的宽度和高度，然后使用margin:0px删除浏览器设置的边距。

html,
body {
  width: 100% height: auto;
  margin: 0px;
}

现在，将包裹居中div的父级必须具有CSS属性text-align:center，基本上它的作用是，它将使元素与显示属性inline-block居中对齐。

.parent {
  text-align: center;
}

然后来到具有班级hcontainerbutton的主div，我们可以设置max-width（在我使用40%的示例中）和min-width（在例如，我使用80%）来满足任何需要。 CSS属性display:inline-block确保它仅占用内容的宽度。 CSS属性word-wrap:break-word确保文本被破坏并保持div的宽度。

以下是代码的工作片段。

＆＃13;

html,
body {
  width: 100% height: auto;
  margin: 0px;
}

.parent {
  text-align: center;
}

.hcontainerbutton {
  word-wrap: break-word;
  min-width: 40%;
  max-width: 80%;
  display: inline-block;
}

＆＃13;

<div class="parent">
  <div class="hcontainerbutton"> asdf
  </div>
  <div class="hcontainerbutton"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend magna augue. Morbi sagittis eu urna et facilisis. Nam finibus erat justo, vel porta magna aliquam a. Pellentesque faucibus molestie libero vitae condimentum. Nunc condimentum tincidunt
    nulla, id suscipit magna dignissim id. Nulla dapibus suscipit velit et viverra. Mauris non gravida justo. Sed efficitur eleifend elementum. Integer non mattis mi. Etiam vestibulum viverra erat, eget dapibus tellus iaculis ut. Mauris ullamcorper magna
    sapien, ac gravida odio blandit varius. Fusce eu placerat enim. Etiam nec elementum dui. In fermentum massa sed augue interdum aliquam. Nunc lacinia blandit elit a iaculis.
  </div>
</div>

＆＃13;

最小宽度的div随着它的内容而增长

2 个答案: