目前，如果我有两个帖子，他们将自己定位在彼此之间/下方，但我希望它们彼此相邻显示，我该如何去做，如果有人可以对它进行一般的外观，我将不胜感激。到我的CSS代码中，那里基本上是好是坏：= D非常感谢
管理员
.grid {
display: inline-flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.grid .post {
border: 4px dashed #207420;
text-align: center;
border-radius: 10px;
width: 200px;
height: 200px;
box-shadow: 4px 4px 4px 8px rgba(0, 0, 0, 0.26);
}
posts.ejs
<%- include("../includes/head.ejs") %>
<link rel="stylesheet" href="/css/admin.css">
</head>
<body>
<%- include("../includes/navigation.ejs", ) %>
<main>
<% if (posts.length > 0) { %>
<% for (let post of posts) { %>
<div class="grid">
<article class="post">
<h1><%=post.title%></h1>
<p><%=post.description%></p>
<a href="/post/<%=post._id%>">See Post</a>
</article>
</div>
<% } %>
<% } else { %>
<h1>No Posts Found</h1>
<% } %>
</main>
<%- include("../includes/footer.ejs") %>
最佳答案
您可以使用grid layout或flex layou t实现此目的。
使用网格
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
.post {
height: 200px;
background: #ccc;
}<div class="grid">
<div class="post"></div>
<div class="post"></div>
</div>使用Flexbox
.flex {
display: flex;
flex-flow: row;
}
.post {
height: 200px;
background: #ccc;
}
.flex .post {
flex-grow: 1;
}
.flex .post:nth-child(2) {
margin-left: 1em;
}<div class="flex">
<div class="post"></div>
<div class="post"></div>
</div>还有其他一些方法，例如使用Floats，但网格和flexbox会更灵活。
关于html - CSS-如何将两个不同的帖子彼此相邻显示？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56781015/