我正在學習 css 網格，但我發現網格模板區域、列和行非常難以理解。我嘗試設計聊天屏幕布局，其中有兩列。左列將包含對話列表，右列將包含三行。一行作為聊天標題，將被修復，另一行將用于消息列表，第三行將是發送消息的表單，這也將被修復。我嘗試按照以下方式進行操作，但它沒有按預期工作.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貢獻1775條經驗 獲得超8個贊
您需要將區域分配給類：
.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 關注
- 145 瀏覽
添加回答
舉報
0/150
提交
取消