我正在學(xué)習(xí) css 網(wǎng)格，但我發(fā)現(xiàn)網(wǎng)格模板區(qū)域、列和行非常難以理解。我嘗試設(shè)計(jì)聊天屏幕布局，其中有兩列。左列將包含對(duì)話列表，右列將包含三行。一行作為聊天標(biāo)題，將被修復(fù)，另一行將用于消息列表，第三行將是發(fā)送消息的表單，這也將被修復(fù)。我嘗試按照以下方式進(jìn)行操作，但它沒有按預(yù)期工作.chat-container { display: grid; grid-template-areas: "chat-list chat-title chat-title" "chat-list message-list message-list" "chat-list chat-form chat-form"; grid-template-columns: 200px 1fr; border-radius: 10px; height: 95vh; width: 100%;}.chat-title { padding: 10px; background: blue;}.chat-list { padding: 10px; background: red;}.message-list { padding: 10px; background: green;}.chat-form { padding: 10px; background: yellow;}<div class="chat-container"> <section class="chat-list"> Chat List </section> <section class="chat-title">Chat title</section> <section class="message-list"> Message List </section> <section class="chat-form">Chat form</section></div>我每行都提到了聊天列表三次，但我仍然沒有看到帶有聊天表單的聊天列表塊。如何布局 2 列，右列有 3 行？
1 回答
www說
TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超8個(gè)贊
您需要將區(qū)域分配給類：
.chat-container {
display: grid;
grid-template-areas: "chat-list chat-title chat-title" "chat-list message-list message-list" "chat-list chat-form chat-form";
grid-template-columns: 200px 1fr;
border-radius: 10px;
height: 95vh;
width: 100%;
}
.chat-title {
padding: 10px;
background: blue;
grid-area: chat-title; /* added */
}
.chat-list {
padding: 10px;
background: red;
grid-area: chat-list; /* added */
}
.message-list {
padding: 10px;
background: green;
grid-area: message-list; /* added */
}
.chat-form {
padding: 10px;
background: yellow;
grid-area: chat-form; /* added */
}
<div class="chat-container">
<section class="chat-list">
Chat List
</section>
<section class="chat-title">Chat title</section>
<section class="message-list">
Message List
</section>
<section class="chat-form">Chat form</section>
</div>
- 1 回答
- 0 關(guān)注
- 156 瀏覽
添加回答
舉報(bào)
0/150
提交
取消