為什么我的HTML結構不能與CSS Grid布局一起使用？
[英]Why doesn't my HTML structure work with the CSS Grid layout?
問題描述
我試圖了解HTML結構如何影響CSS網格布局模塊規范。 我正在使用啟用了實驗功能的Chrome Canary。
附加的代碼可以按預期工作，但是將導航和搜索僅放置在header標記內只是為了語義，會拋出CSS網格放置。
我缺少能夠使用CSS網格模塊並且仍將我的語義標頭與nav，brand和search一起包裹在標頭標記中的功能，該怎么辦？
html { box-sizing: border-box; min-height: 2000px; } *, *:before, *:after { box-sizing: inherit; } .wrapper { width: 100%; display: grid; grid-template-columns: 20% auto 20%; grid-template-rows: 50px auto 50px; background-color: #fff; color: #444; } .mainheader { grid-column: 1 / span 3; grid-row: 1; background: #39444C; } .brand { height: 100%; margin: auto; color: #FFFFFF; background: #2E3840; } .search { grid-column: 3; grid-row: 1; } .navbar { grid-column: 2; grid-row: 1; background: #39444C; } ul { padding: 12px; margin: 0; } .navbar li { display: inline; padding: 10px; } .navbar li a { color: #9CA19A; text-decoration: none; font-size: 1.1rem; } .navbar a:hover { color: #00A5D5; } .sidenav { grid-column: 1; grid-row: 2; background: #F2F2F2; } .content { grid-column: 2; grid-row: 2; background: yellow; } .mainfooter { background: gray; grid-column: 1 / span 2; grid-row: 3; } .mainheader h1 { font-size: 2.8vw; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="wrapper"> <header class="mainheader"> <h1 class="brand">Simply Expense</h1> </header> <nav class="navbar"> <ul> <li><a href="#">Expenses</a> </li> <li><a href="#">Receipts</a> </li> <li><a href="#">Reports</a> </li> </ul> </nav> <div class="search"> <button>test</button> <input type="text"> </div> <aside class="sidenav"> Side nav </aside> <div class="content"> <button>test</button> <button>test</button> <button>test</button> </div> <footer class="mainfooter"> Footer </footer> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2015-06-01 00:56:34
弄清楚了，如果您將品牌，導航和搜索放置在標題內，它們不再是網格的直接后代，因此要正確放置它們，當subgrid關鍵字可用時，您需要制作另一個網格/子網格。 現在，您可以只使用具有相同尺寸的display：grid
鑒於此HTML：
<div class="wrapper">
<div class="header">
<h1 class="logo">Simply Expense</h1>
<nav class="navbar">
<ul>
<li><a href="#">Expenses</a></li>
<li><a href="#">Receipts</a></li>
<li><a href="#">Reports</a></li>
</ul>
</nav>
<div class="search">
<button>test</button>
<input type="text">
</div>
</div>
</div>
CSS將是：
.wrapper {
display: grid;
grid-template-columns: 20% 60% 20%;
grid-template-rows: 50px auto 50px;
}
.header {
grid-column: 1 /span 3;
grid-row: 1 ;
display: grid;
grid-template-columns: 20% 60% 20%;
grid-template-rows: 50px;
}
.logo {
grid-column: 1;
grid-row: 1;
margin: 0;
color: #FFFFFF;
background: #2E3840;
}
.search{
grid-column: 3;
grid-row: 1;
background: #2E3840;
}
演示：
html { box-sizing: border-box; min-height: 2000px; } *, *:before, *:after { box-sizing: inherit; } body{ margin: 10px; padding: 0; } .header{ grid-column: 1 /span 3; grid-row: 1 ; display: grid; grid-template-columns: 20% 60% 20%; grid-template-rows: 50px; } .wrapper { display: grid; grid-template-columns: 20% 60% 20%; grid-template-rows: 50px auto 50px; } .logo { grid-column: 1; grid-row: 1 ; margin: 0; color: #FFFFFF; background: #2E3840; } .search{ grid-column: 3; grid-row: 1; background: #2E3840; } .navbar { grid-column: 2; grid-row: 1; background: #39444C; } .sidenav { grid-column: 1; grid-row: 2; background: #F2F2F2; } .content { grid-column: 2/span 2; grid-row: 2; background: yellow; } .mainfooter { background: gray; grid-column: 1 / span 3 ; grid-row: 3; } .mainheader h1 { font-size: 2.8vw; } ul { padding: 12px; margin: 0; } .navbar li { display: inline; padding: 10px; } .navbar li a { color: #9CA19A; text-decoration: none; font-size: 1.1rem; } .navbar a:hover { color: #00A5D5; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles.css"/> </head> <body> <div class="wrapper"> <div class="header"> <h1 class="logo">Simply Expense</h1> <nav class="navbar"> <ul> <li><a href="#">Expenses</a></li> <li><a href="#">Receipts</a></li> <li><a href="#">Reports</a></li> </ul> </nav> <div class="search"> <button>test</button> <input type="text"> </div> </div> </div> </body> </html>
ConvertAPI：將 HTML 轉換為 DOCX 不適用於網格 css
[英]ConvertAPI: Convert HTML to DOCX doesn't work with grid css
為什么這個網格布局不起作用？ 具體來說：為什么嵌套的項目是按行排列而不是放在網格上的？
[英]Why doesn't this grid layout work? Specifically: Why are the nested items arranged in rows and not placed on grid?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.