我想將兩個或多個容器內(nèi)聯(lián)放置，這里是我的 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條經(jīng)驗 獲得超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條經(jīng)驗 獲得超14個贊
使用 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條經(jīng)驗 獲得超10個贊
你可以使用 flex 來實現(xiàn)這一點
<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條經(jīng)驗 獲得超3個贊
這是您需要的：
我還刪除了您的內(nèi)聯(lián)代碼container并制作了一個選擇器類以便于維護，您可以根據(jù)需要增加/減少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 target="blank" style="text-decoration: none;">
? ? ? <div class="container">
? ? ? ? <img src="http://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 target="blank" style="text-decoration: none;">
? ? ? <div class="container">
? ? ? ? <img src="http://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：
證明內(nèi)容合理
#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 target="blank" style="text-decoration: none;">
? ? ? <div class="container">
? ? ? ? <img src="http://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 target="blank" style="text-decoration: none;">
? ? ? <div class="container">
? ? ? ? <img src="http://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 關注
- 145 瀏覽
添加回答
舉報
0/150
提交
取消