Question

当前，如果我有两个帖子，他们会将自己定位在彼此之间/下方，但我希望它们彼此相邻显示，我该如何去做，如果有人可以拥有一个，我也将不胜感激大致看一下我的CSS代码，那里的好坏基本上是：= D非常感谢

admin.css

$uri = "URLwithHTMLTables"
$data = Invoke-WebRequest $uri
$table = $data.ParsedHtml.getElementsByTagName("table") | Select -first 1
$table | select -ExpandProperty innertext

posts.ejs

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

Answer 1

您可以使用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，但是网格和弹性框会更灵活。

CSS-如何将两个不同的帖子彼此相邻显示？

1 个答案: