防止使用flex推送同级
防止使用flex推送同级
提问于 2018-06-01 03:50:45
我有一个图像，我在它的右侧和底部显示了一个文本，可以在第一个代码片段中看到(在整个窗口中查看代码片段)。现在我想添加另一个文本，它将位于图像的右上角，在其他文本的上方，但它会将底部的文本推到右侧。我希望两个文本都与图像相关，但最后一段似乎与兄弟姐妹相关。(**很抱歉有太多的html标签，我也在使用css框架)
.justify-content-end {
align-self: flex-end;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet"/>
<div class="level">
<div class="level-left">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
<div class="level-item justify-content-end">
<p>Hello World</p>
</div>
</div>
</div>
这是描述这个问题的代码片段：
.justify-content-start {
align-self: flex-start;
}
.justify-content-end {
align-self: flex-end;
}
#click {
text-align: center;
width: 128px;
cursor: pointer;
border: 1px solid red;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="level">
<div class="level-left">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
<div class="level-item justify-content-start">
<label class="label">
<p id="click">Click Me!</p>
</label>
</div>
<div class="level-item justify-content-end">
<p>Hello World</p>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50631776
复制相关文章
相似问题
腾讯云开发者
