使用内容扩展div宽度

时间:2018-11-19 11:39:19

标签: 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>

1 个答案:

答案 0 :(得分:-1)

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