Question

我正在尝试制作它所以我有一个流体容器宽度100％，其中内部是两个流体div宽度45％，左div将是文本然后第二个div将是图像或更多文本。

CSS：

    #aboutContainer {
    display: flex;
    width: 94%;
    max-width: 1000px;
    margin: auto;
    background-color: red;
}
.box {
    width:32.333%;
    padding:10px;
    margin:0 0.5%;
    border:1px solid #999;
    box-sizing:border-box;
    background-color:#efefef;
 }

HTML

 <div id="aboutContainer">

<div class="aboutBox">
<p>
Text input
</p>
</div>

<div class="aoutBox">
<p>
Text input
</p>
</div>

Answer 1

您的课程名称不正确。我更正了这一点，并将宽度百分比设置为您在帖子中指定的宽度百分比，这对我有用。

HTML

<div id="aboutContainer">
  <div class="box">
    <p>
      Text input
    </p>
  </div>

  <div class="box">
    <p>
      Text input or image
    </p>
  </div>
</div>

CSS

#aboutContainer {
  display: flex;
  width: 100%;
  margin: auto;
  background-color: red;
}

.box {
  width: 45%;
  padding: 10px;
  margin: 0 0.5%;
  border: 1px solid #999;
  box-sizing: border-box;
  background-color: #efefef;
}

Codepen http://codepen.io/anon/pen/ZQRGKj

Answer 2

您的代码中存在一些拼写错误。您有CSS类.box，但在HTML中您使用aboutBox和aoutBox。

Here's a JSFiddle纠正错别字，但可能不是你想要的。

Here's another JSFiddle最有可能是你想要的。使用flexbox时，您不需要提供特定的宽度，因为flexbox会处理这个问题。对于justify-content，您可以试用center，space-between和space-around。

#aboutContainer {
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    background-color: red;
}
.box {
    display: flex;
    flex: 1;
    margin:0 0.5%;
    border:1px solid #999;
    box-sizing:border-box;
    background-color:#efefef;
 }

Answer 3

底部缺少一个，html中的classe名称与CSS类的名称不匹配（例如，如果css应用于.box，那么你的HTML也应该说class =“box”）。

css规则也需要改变。

一个容器中有两个div

3 个答案: