证明内容不起作用

Question

证明内容不起作用

我创建了一个子容器，其中包含两个我想显示为 flex-direction: row 和 justify-content: space- Between 的项目。我似乎无法让它发挥作用。

HTML：

<body>
<div class="container"> 
<div class="randqg">
<div class="title">Random Quote Generator</div>
<div class="subcontainer">
<i class="fa fa-quote-left fa-3x" aria-hidden="true"></i>
<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
</div>
<blockquote id="text">Original Text</blockquote>
<div class="subcontainer">
<span id="author">author</span>
<i class="fa fa-quote-left" aria-hidden="true"></i> 
</div>
</div>
</div>
</body>
<script src="https://use.fontawesome.com/02b956c77d.js"></script>

Run Code Online (Sandbox Code Playgroud)

CSS：

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: blue;
}

.randqg {
  display: flex;
  align-items: center;
  min-height: 24em;
  justify-content: center;
  flex-direction: column;
  width: 500px;
  height: 50%;
  border: 5px solid red;
}

.title {

}

.subcontainer{
    width: 80%;
    height: 80%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: auto;
}

Run Code Online (Sandbox Code Playgroud)

JS 小提琴：https://jsfiddle.net/3qx8aw44/

我已经使用开发工具检查了 justify-content 是否应用于子容器，所以我不认为这是一个拼写错误。

我认为这可能是没有足够的可用空间在项目之间分配的问题。因此将宽度更改为小于 100%。

我检查了

Answer 1

小智 3

这是因为你使用的是display block，你不能使用display block，并且在同一个div中给像justify-content这样的flex属性，你需要使用display flex：

.subcontainer{
  width: 80%;
  height: 80%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  display: flex;                       /*  added  */
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，3 月前
查看次数：	7244 次
最近记录：	8 年，3 月前