如何解决内联显示div
我目前正在为我的游戏制作一个网站,并且目前在游戏页面上。我已经添加了所有(6)个游戏 ,但 都在彼此之下,这不是我想要的。我希望它们全部内联,并且当其他游戏不能满足要求时,它将进行新的修改。
这是我 在 内联之前使用的代码
.games_image:hover {
cursor: pointer;
transform: scale(1.1);
}
#games {
background-color: black;
margin: 0;
}
.games_content_fig_desc {
color: white !important;
width: 250px;
margin-top: 15px;
}
.games_content {
display: inline;
}
.games_content_fig {
margin-left: 55px;
color: #ffec00;
}
.download_button:hover {
transform: scale(1.1);
}
.download_button {
background-color: #ff7171; /* Default Website Color Scheme */
margin: 25px 55px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
<div id="games">
<div class="games_content">
<div class="dream_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption></a>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angry_birds">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_match">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds-friends">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_evolution">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_pop">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_transform">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
</div>
</div>
这是我尝试用于内联的CSS:
.games_content {display: inline-block;}
.games_content { display: flexbox;}
解决方法
您需要进行的必要更改是在.games_content
div上:
.games_content {
display: flex;
flex-wrap: wrap;
}
这将允许其子代在同一行上并在必要时进行换行。
.games_image:hover {
cursor: pointer;
transform: scale(1.1);
}
#games {
background-color: black;
margin: 0;
}
.games_content_fig_desc {
color: white !important;
width: 250px;
margin-top: 15px;
}
.games_content {
display: flex;
flex-wrap: wrap;
}
.games_content_fig {
margin-left: 55px;
color: #ffec00;
}
.download_button:hover {
transform: scale(1.1);
}
.download_button {
background-color: #ff7171;
/* Default Website Color Scheme */
margin: 25px 55px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
<div id="games">
<div class="games_content">
<div class="dream_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
</a>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angry_birds">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_match">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds-friends">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_evolution">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_pop">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_transform">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
</div>
</div>
,
在.games_content中使用“ display:flex”。
.games_image:hover {
cursor: pointer;
transform: scale(1.1);
}
#games {
background-color: black;
margin: 0;
}
.games_content_fig_desc {
color: white !important;
width: 250px;
margin-top: 15px;
}
.games_content {
display: flex;
flex-wrap:wrap;
}
.games_content_fig {
margin-left: 55px;
color: #ffec00;
}
.download_button:hover {
transform: scale(1.1);
}
.download_button {
background-color: #ff7171; /* Default Website Color Scheme */
margin: 25px 55px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
<div id="games">
<div class="games_content">
<div class="dream_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption></a>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angry_birds">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_match">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds-friends">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_evolution">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_pop">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_transform">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
</div>
</div>
,
据我了解,.games_content是您希望水平放置的元素的容器。
您有2个选择:在容器(.games_content)上正确使用flexbox,我建议您多挖一点flexbox,因为一个简单的'display:flexbox;'不会解决问题的,而且要复杂得多。
OR
所有子div(.dream_blast,angry_birds等)应具有“ display:inline-block”属性。
快速解决方案:
添加:.games_content > div { display: inline-block; }
这将选择.games_content的所有直接div子代并应用所需的显示样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。