CSS - Как я могу отобразить два разных сообщения рядом друг с другом? - PullRequest
Новая
       10

CSS - Как я могу отобразить два разных сообщения рядом друг с другом?

0 голосов
/ 27 июня 2019

В настоящее время, если у меня есть два поста, они позиционируют себя под / над одним и другим, но я хочу, чтобы они отображались рядом друг с другом, как я могу это сделать, также я был бы очень признателен, если бы кто-то мог просто иметь общий взгляд на мой CSS-код, что там в основном хорошего и плохого: = D Большое спасибо

admin.css 

.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") %>

1 Ответ

1 голос
/ 27 июня 2019

Для этого можно использовать макет сетки или 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>

Есть и другие методы, такие как использование Float, но сетки и flexbox-ы были бы более гибкими.

...