html - 用内容扩展 div 宽度

标签 html css

<分区>

我希望我的元素 .item 在 #item-wrapper 内与左侧对齐,并在 .items div 内居中。它有点工作,但是当我调整窗口大小时,#item-wrapper 不再具有正确的宽度

.items {
    text-align: center;
    box-sizing: border-box;
    width: 80vw;
    margin: auto;
    padding: 10px;
    display: flex;
    background: red;
}

#items-wrapper {
    margin: auto;
    text-align: left;
    font-size: 0;
    background: green;
}

.item {
    box-sizing: border-box;
    width: 250px;
    height: 250px;
    display: inline-block;       
    background: blue;
    border: 1px solid black;
}
<div class="items">
    <div id="items-wrapper">
        <div id="item01" class="item"></div>
        <div id="item02" class="item"></div>
        <div id="item03" class="item"></div>
    </div>
</div>

最佳答案

.items {
        text-align: center;
        box-sizing: border-box;
        width:80%;
        margin: auto;
        padding: 10px;
        display: flex;
        background: red;
      }

#items-wrapper
  {
    margin: auto;
    text-align: left;
    font-size: 0;
    background: green;
   } 
 .item {
      box-sizing: border-box;
      width:32%px;
      height:32%px;
      display: inline-block;
      background: blue;
      border: 1px solid black;
   }    

如果你想将你的 div 元素停止到某个尺寸,你可以给出最小宽度:例如 100px;

关于html - 用内容扩展 div 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53373851/

上一篇:html - 如果涉及 <h> 元素,则负底边距 "stickey footer"具有烦人的垂直滚动条

下一篇:html - 如何在 jQuery Mobile 中编辑上传文件小部件的占位符?

相关文章:

javascript - 如何将reCaptcha v2与JS和PHP表单集成?

javascript - 行内 block 删除底部空间以添加文本

javascript - 如何在 jquery 中使用 $this 提醒值?

asp.net - 将 .html 扩展名放在 ulrs 上的好处

php - 在 PHP 页面上放置回显或将其与 CSS 合并

html - 将 child 的高度扩展到未声明高度的 parent

html - 基于对象宽度的 TranslateY

javascript - 使用航路点滚动动画

javascript - 如何在响应式 div 中缩进由溢出包装引起的每一秒可视行

javascript - 从底部开始将元素附加到 div?