Я пытался выровнять все элементы на веб-сайте, чтобы они имели не более 3 элементов подряд, и чтобы они были выровнены по левому краю.
Но я получил следующий результат. (изображение сайта)
Я использовал Ruby on Rails для создания этого сайта, поэтому для некоторых людей может быть сложно реализовать код.
Мой код
h1 {
text-align: center;
}
footer {
text-align: center;
}
.blog {
border: 4px solid black;
border-radius: 10px;
background-color: lightgray;
text-align: center;
margin: 2% auto;
padding: 10px;
min-width: 33%;
max-width: 33%;
overflow: auto;
}
.blog-container {
display: flex;
flex-flow: row wrap;
width: 80%;
margin: 0px auto;
justify-content: flex-start;
}
.new-blog-form {
margin: 0px 30%;
}
.text-area {
width: 100%;
height: 400px;
}
.title-input {
width: 100%;
}
<!DOCTYPE html>
<html>
<title>My Blog</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<body>
<h1>My Blogs</h1>
<div class="blog-container">
<% @blogs.each do |blog| %>
<div class="blog">
<p class="title">
<%= blog.title %>
</p>
<p class="time">
<%= blog.created_at %>
</p>
<%= link_to 'Learn More', blog_path(blog), class: "btn btn-info" %>
</div>
<% end %>
</div>
<footer>
<%= link_to 'New Blog', '/blogs/new', class: "btn btn-primary" %>
</footer>
</body>
</html>
Любое предложение полезно для меня.Спасибо.
Обновление:
Проблема была решена путем удаления двух операторов margin, одного в .blog и одного в .blog-container
Спасибо заваша помощь.