时间戳

首页 > 解决方案 > 为什么我不能将我的三个 div 放在一行中？

html - 为什么我不能将我的三个 div 放在一行中？

问题描述

.parent {
  width: 100%;
}

.box {
  width: 33.3%;
  display: inline-block;
}

body {
  margin: 0px;
  padding: 0px;
}
<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

现在我的三个 div 不在同一行。编号为 3 的 div 进入新行。这是为什么 ？我将父级设置为 100% 宽度，我的三个 div 设置为 33.3%，因此它们应该适合 100% 宽度的容器。

问题出在哪里 ？

标签： htmlcss

解决方案

你应该做一个弹性盒子。

.parent {
    display: flex;
    justify-content: space-evenly;
}

.box {
    background: grey;
    border: 2px solid black;
    width: 33.3%;
    display: inline-block;
}

body {
    margin: 0px;
    padding: 0px;
}
<div class="parent">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

用于display: flex使您的父容器成为 flexbox。用于justify-content: space-evenly;为每个对象平均分配空间，以便它们彼此相邻。

这应该可以完成工作:)

推荐阅读