如何并排获取 <div> [重复]

Question

我创建了这些 div 作为按钮以重定向到不同的站点页面，但由于某种原因，我无法将它们并排放置。我已经尝试了包括 flexbox 在内的所有方法，但我似乎无法将 div 并排放置。我做错了什么。

有没有更简单的方法来完成我想要完成的事情？还是我检查了一个简单的错误。

html, body {
    margin: 0;
    height: 100%;
}
.img_container {
    border: none;
    width: 70%;
    padding: 10px;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
}
a {
    text-decoration: none;
}
a:link, a:visited {
    color: #b3ab7d;
}
a:hover {
    color: #b3ab7d;
}
.background {
    background: #104723;
    width: 150px;
    height: 150px;
}
.img {
    width: 70%;
    display: block;
    margin: 0 auto;
}
a {
    display: block;
    text-align: center;
}
.text{
  font-size: 70%;
}
*{
    box-sizing: border-box;
}
.center {
    justify-content: center;
    align-items: center;
}

<div class="center">
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Access Control (AC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Identification & Authentication (IA)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Media Protection (MP)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Physical Protection (PE)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Communications Protection (SC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Information Integrity (SI)</span>
    </div>
    </a>
</div>
</div>

Answer 1

您在.center 类名中忘记了display: flex;。

检查您更新的 sn-p。

html, body {
    margin: 0;
    height: 100%;
}
.img_container {
    border: none;
    width: 70%;
    padding: 10px;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
}
a {
    text-decoration: none;
}
a:link, a:visited {
    color: #b3ab7d;
}
a:hover {
    color: #b3ab7d;
}
.background {
    background: #104723;
    width: 150px;
    height: 150px;
}
.img {
    width: 70%;
    display: block;
    margin: 0 auto;
}
a {
    display: block;
    text-align: center;
}
.text{
  font-size: 70%;
}
*{
    box-sizing: border-box;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="center">
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Access Control (AC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Identification & Authentication (IA)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Media Protection (MP)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Physical Protection (PE)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Communications Protection (SC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Information Integrity (SI)</span>
    </div>
    </a>
</div>
</div>

Answer 2

显示弹性；好像不见了。

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 3

只需从下面的类中删除宽度并根据需要向左或向右添加浮动。

.img_container {
    border: none;
    width: auto;
    padding: 10px;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
    float: left;
}