代码之家 › 专栏 › 技术社区 › Will

证明内容无效

flexbox css html

Will · 技术社区 · 7 年前

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>

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

https://jsfiddle.net/3qx8aw44/

我已经用开发工具检查过,证明内容应用于子容器是正确的,所以我认为这不是打字错误。

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

我查过了

1 回复 | 直到 4 年前

Asons Oliver Joseph Ash 7 年前

这是因为您使用的是display block,不能使用display block,并且在同一个div中赋予flex属性,如justify content,您需要使用display flex:

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

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前