时间戳

首页 > 解决方案 > 用内容扩展 div 宽度

html - 用内容扩展 div 宽度

问题描述

我希望我的项目 .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>

标签： htmlcss

解决方案

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

推荐阅读