我想将两个或多个容器内联放置，这里是我的 HTML 代码：<div id="containers-place"> <div style="padding: 16px;"> <a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;"> <img src="picture1.png" width="100%"> <h4>Picture One</h4> <p>As you can see this is picture One</p> </div></a> </div> <div id="idk" style="padding: 16px;"> <a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;"> <img src="picture2.png" width="100%"> <h4>Picture2</h4> <p>As you can see this is picture Two</p> </div></a> </div>还有CSS：.container { padding: 16px; background-color: #333333; color: #fff; display: block;}我把浏览器截图了： screenshoot
4 回答
波斯汪
TA贡献1811条经验 获得超4个赞
添加display:flex到divid container-place。
.container {
padding: 16px;
background-color: #333333;
color: #fff;
}
#containers-place {
display:flex;
flex-direction:row;
}
<div id="containers-place">
<div style="padding: 16px;">
<a href="https://google.com/" target="blank" style="text-decoration: none;">
<div class="container" style="width: 20%;">
<img src="picture1.png" width="100%">
<h4>Picture One</h4>
<p>As you can see this is picture One</p>
</div>
</a>
</div>
<div id="idk" style="padding: 16px;">
<a href="https://google.com/" target="blank" style="text-decoration: none;">
<div class="container" style="width: 20%;">
<img src="picture2.png" width="100%">
<h4>Picture2</h4>
<p>As you can see this is picture Two</p>
</div>
</a>
</div>
</div>
翻翻过去那场雪
TA贡献2065条经验 获得超13个赞
使用 flex 来做这种事情：
#container{
display:flex;
}
<div id="container">
<div style="padding: 16px;">
<a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;">
<img src="picture1.png" width="100%">
<h4>Picture One</h4>
<p>As you can see this is picture One</p>
</div></a>
</div>
<div id="idk" style="padding: 16px;">
<a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;">
<img src="picture2.png" width="100%">
<h4>Picture2</h4>
<p>As you can see this is picture Two</p>
</div></a>
</div>
隔江千里
TA贡献1906条经验 获得超10个赞
你可以使用 flex 来实现这一点
<div id="containers-place"class='flexrow'>
<div style="padding: 16px;" class='flexcolumn'>
<a href="https://google.com/" target="blank" style="text-decoration: none;"><div style="width: 20%;">
<img src="picture1.png" width="100%">
<h4>Picture One</h4>
<p>As you can see this is picture One</p>
</div></a>
</div>
<div id="idk" style="padding: 16px;" class='flexcolumn'>
<a href="https://google.com/" target="blank" style="text-decoration: none;"><div style="width: 20%;">
<img src="picture2.png" width="100%">
<h4>Picture2</h4>
<p>As you can see this is picture Two</p>
</div></a>
</div>
CSS
.flexrow{
display: flex;
flex-direction: row
}
.flexcolumn{
//you can adjust width if you want
}
偶然的你
TA贡献1841条经验 获得超3个赞
这是您需要的：
我还删除了您的内联代码container并制作了一个选择器类以便于维护，您可以根据需要增加/减少width或。height
#containers-place {
display: flex;
flex-direction: row;
}
.container {
padding: 16px;
background-color: #333333;
color: #fff;
/*Change the width as per your requirement */
width: 80%;
}
<div id="containers-place">
<div style="padding:16px;">
<a href="https://google.com/" target="blank" style="text-decoration: none;">
<div class="container">
<img src="//placekitten.com/301/301" width="100%">
<h4>Picture One</h4>
<p>As you can see this is picture One</p>
</div>
</a>
</div>
<div id="idk" style="padding: 16px;">
<a href="https://google.com/" target="blank" style="text-decoration: none;">
<div class="container">
<img src="//placekitten.com/301/301" width="100%">
<h4>Picture2</h4>
<p>As you can see this is picture Two</p>
</div>
</a>
</div>
</div>
在项目之间添加Space-between：
证明内容合理
#containers-place {
display: flex;
flex-direction: row;
width: 800px; /* if you need distance between container then fix this */
border: 1px solid red;
justify-content: space-between; /* this will move item */
}
.container {
padding: 16px;
background-color: #333333;
color: #fff;
width: 200px;
}
<div id="containers-place" class="MainClass">
<div style="padding:16px;">
<a href="https://google.com/" target="blank" style="text-decoration: none;">
<div class="container">
<img src="//placekitten.com/301/301" width="100%">
<h4>Picture One</h4>
<p>As you can see this is picture One</p>
</div>
</a>
</div>
<div id="idk" style="padding: 16px;">
<a href="https://google.com/" target="blank" style="text-decoration: none;">
<div class="container">
<img src="//placekitten.com/301/301" width="100%">
<h4>Picture2</h4>
<p>As you can see this is picture Two</p>
</div>
</a>
</div>
</div>
- 4 回答
- 0 关注
- 76 浏览
添加回答
举报
0/150
提交
取消