html - 我怎样才能使它成为我的元素不相互重叠?
问题描述
我正在尝试将多篇文章发布到一个网站,但是在使用使用 position:absolute 的代码使文章居中之后,这些文章现在相互重叠。我希望文章按顺序垂直堆叠。现在文章完全重叠,如果我有不同的文字,它可能看起来很奇怪。我真的需要一些帮助,所以我包含了以下代码。
h1 {
margin: 0 auto;
font-size: 80px;
text-align: center;
font-family: Bahnschrift;
}
.list-group {
text-align: center;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
a:focus,
a:hover {
text-decoration: none;
color: white;
}
.post-title:focus,
.post-title:hover {
text-decoration: none;
color: black;
}
a {
display: inline-block;
padding: 15px;
font-family: Bahnschrift;
color: black;
font-size: 20px;
text-decoration: none;
}
#header {
text-align: center;
background-color: #000000;
}
.link {
color: white;
font-size: 20px;
}
/* tell the container's children to float left: */
.float-my-children>* {
float: left;
}
.float-my-children>img {
margin-right: 5px;
width: calc(10% - 5px);
}
.float-my-children>div {
width: 90%;
}
/* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */
.clearfix {
*zoom: 1/* for IE */
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* end clearfix*/
article {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<article>
<div class="interview-link float-my-children clearfix">
<a href="#">
<img width="260" height="170" src="https://via.placeholder.com/300">
</a>
<h2 class="post-title">
<a class="post-title" href="#"> 25 Questions With Stacey Racks </a>
</h2>
</div>
</article>
<article>
<div class="interview-link float-my-children clearfix">
<a href="#">
<img width="260" height="170" src="https://via.placeholder.com/300">
</a>
<h2 class="post-title">
<a class="post-title" href="#"> 25 Questions With Stacey Racks </a>
</h2>
</div>
</article>
有什么想法可以让文章按顺序垂直堆叠吗?
解决方案
使用 flexbox 创建水平居中的堆栈非常简单:
html,
body {
margin: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.item {
border: 1px solid;
}
<div class="container">
<div class="item">foo</div>
<div class="item">bar</div>
<div class="item">baz</div>
</div>
推荐阅读
- node.js - 错误:回调已被调用。当使用异步瀑布并尝试永远运行程序时
- python - 列表不保存其值 - python
- python - 由于 EnvironmentError,spaCy 模型安装失败
- django - 使用 django 序列化程序发布到数据库
- c - 函数参数有例外吗?
- javascript - 如何优化“比特流”以处理 JavaScript 中的输入块?
- c# - 来自响应的 ASP.NET Core MVC 空对象
- python - 不确定为什么对象作为字符串传递
- node.js - 如何将 etcd3 nodejs 客户端用于与标准不同的端口?
- python - 带有时区的 Python 日期,UTC 和 CET 之间的奇怪差异