如何將這些 div 彼此相鄰放置在 3x2 行而不是 1 行中。我應該將事件框和事件信息作為一個 div 而不是兩個單獨的 div 嗎？我嘗試將它們合并為一個 div 并給出了<p>event-info 類，但這沒有成功。我還嘗試了 div 和容器的不同大小，以便將它們推到彼此旁邊，但這也不起作用。請參閱下面的我的代碼。 .event-box{ height: 5rem; width: 30rem; float: left; clear: both; padding: 0; margin-top: 1rem; text-align: center; background: url(/assets/images/placeholderimg4.jpg);} .event-info{ height: 5rem; width: 30rem; float: left; clear: both; padding: 0; margin: 0; text-align: center; background-color: rgba(77, 75, 75, 0.1);} .container{ height: 100%; width: 64rem; word-wrap: break-word; overflow-y: hidden; padding: 0;}<div class="container"> <div class="event-box"> <h3 class="event-text">Event 1</h3> </div> <div class="event-info"> <p>1</p> </div> <div class="event-box"> <h3 class="event-text">Event 2</h3> </div> <div class="event-info"> <p>2</p> </div> <div class="event-box"> <h3 class="event-text">Event 3</h3> </div> <div class="event-info"> <p>3</p> </div> <div class="event-box"> <h3 class="event-text">Event 4</h3> </div> <div class="event-info"> <p>4</p> </div> <div class="event-box"> <h3 class="event-text">Event 5</h3> </div> <div class="event-info"> <p>5</p> </div> <div class="event-box"> <h3 class="event-text">Event 6</h3> </div> <div class="event-info"> <p>6</p> </div> </div>
3 回答
飲歌長嘯
TA貢獻1951條經驗 獲得超3個贊
所以我為此使用了 CSS 網格。我確實將您的事件信息和事件框 div 組合在一起，使它們成為網格中的一個對象。
.event-box {
height: 5rem;
width: 30rem;
float: left;
clear: both;
padding: 0;
margin-top: 1rem;
text-align: center;
background: url(/assets/images/placeholderimg4.jpg);
}
.event-info {
height: 5rem;
width: 30rem;
float: left;
clear: both;
padding: 0;
margin: 0;
text-align: center;
background-color: rgba(77, 75, 75, 0.1);
}
.container {
height: 100%;
width: 64rem;
word-wrap: break-word;
padding: 0;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
grid-gap: 2rem;
}
<div class="container">
<div class="event-box">
<h3 class="event-text">Event 1</h3>
<div class="event-info">
<p>1</p>
</div>
</div>
<div class="event-box">
<h3 class="event-text">Event 2</h3>
<div class="event-info">
<p>2</p>
</div>
</div>
<div class="event-box">
<h3 class="event-text">Event 3</h3>
<div class="event-info">
<p>3</p>
</div>
</div>
<div class="event-box">
<h3 class="event-text">Event 4</h3>
<div class="event-info">
<p>4</p>
</div>
</div>
<div class="event-box">
<h3 class="event-text">Event 5</h3>
<div class="event-info">
<p>5</p>
</div>
</div>
<div class="event-box">
<h3 class="event-text">Event 6</h3>
<div class="event-info">
<p>6</p>
</div>
</div>
</div>
因此，在容器類中，我添加了網格顯示（以使用網格功能），然后添加了 grid-template-columns （允許您指定要包含的列數）和 grid-template-rows 來執行對于行來說也是同樣的事情。然后我添加了一個網格間隙來稍微分隔 div 標簽，但可以根據所需的間隙來使用該值。
冉冉說
TA貢獻1877條經驗 獲得超1個贊
您可以添加一個換行 div，例如“事件”：
<div class="container">
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 1</h3>
</div>
<div class="event-info">
<p>1</p>
</div>
</div>
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 2</h3>
</div>
<div class="event-info">
<p>2</p>
</div>
</div>
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 3</h3>
</div>
<div class="event-info">
<p>3</p>
</div>
</div>
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 4</h3>
</div>
<div class="event-info">
<p>4</p>
</div>
</div>
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 5</h3>
</div>
<div class="event-info">
<p>5</p>
</div>
</div>
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 6</h3>
</div>
<div class="event-info">
<p>6</p>
</div>
</div>
</div>
還有一點 css 添加：
.event{
display:inline-block;
width:49%;
}
嘗試一下 - https://jsfiddle.net/5vz3Lhwc/
qq_笑_17
TA貢獻1818條經驗 獲得超7個贊
您可以利用 Flexbox 的強大功能！將每個內容包裝row在帶有 class row 的 div 中，并將每列包裝在帶有 class 的 div 中col。例子：
<div class="container">
<div class="row">
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 1</h3>
</div>
<div class="event-info">
<p>1</p>
</div>
</div>
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 2</h3>
</div>
<div class="event-info">
<p>2</p>
</div>
</div>
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 3</h3>
</div>
<div class="event-info">
<p>3</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 4</h3>
</div>
<div class="event-info">
<p>4</p>
</div>
</div>
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 5</h3>
</div>
<div class="event-info">
<p>5</p>
</div>
</div>
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 6</h3>
</div>
<div class="event-info">
<p>6</p>
</div>
</div>
</div>
</div>
添加元素的 CSS：
.row {
width: 100%;
display: flex;
}
.col {
width: 33%;
flex: 1;
}
編輯：CSS 網格可能是一個更簡單的解決方案。
- 3 回答
- 0 關注
- 176 瀏覽
添加回答
舉報
0/150
提交
取消