Question

我尝试在同一行上对齐三个div，但div只逐行显示，就好像我在使用列一样。我的错误是什么？

如果你认为错误可能来自'header.php'，那就是我目前为止我工作的唯一其他部分，请不要犹豫告诉我。如果被要求，我会在这里发布它的HTML和CSS。

body {
  background-color: #F1F1F1;
  font-family: 'robotolight';
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}
.container {
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-flow: row nowrap;
  -webkit-flex-flow: row wrap;
  jusitify-content: space-around;
}
.mydiv {
  background-color: #ffffff;
  -moz-box-shadow: 1px 1px 1px 0px #999999;
  -webkit-box-shadow: 1px 1px 1px 0px #999999;
  -o-box-shadow: 1px 1px 1px 0px #999999;
  box-shadow: 1px 1px 1px 0px #999999;
  width: 30%;
  height: 30%;
}

<div id="container">
  <div class="mydiv">
    first div left
  </div>

  <div class="mydiv">
    second div center
  </div>

  <div class="mydiv">
    third div right
  </div>
</div>

Answer 1

您拥有.container元素，但您拥有#container元素。
它是justify-content而不是jusitify-content。

示例：

＆＃13;

.container {
  align-items: center;
  border: 3px solid #CCC;
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  padding: .5rem;
  width: 210px;
}
.box {
  background-color: #ddd;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 60px;
}

＆＃13;

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

＆＃13;

div不使用display：flex对齐为行

1 个答案: