父级与CSS的同胞占用宽度 [英] Occupy width from sibling of parent with CSS
问题描述
根据HTML5标签的语义，我设计了一个网页。 HTML主体的基本结构如下
As per HTML5 tag semantics, I designed a web page. A basic structure of the HTML body is as follows
<nav class="nav-primary">
<div class="heading-primary">
<!-- Logo & links of webpage -->
</div>
<div class="nav-side">
<!-- Left side navigation of the page -->
</div>
</nav>
<section class="section-content">
<!-- Contents of the web page -->
</section>
最终网站的外观应如下所示
The end website should have a standard look as follows
我想到了语义，并写了左侧导航面板（.nav-primary> .nav-
I thought of semantics and wrote the left navigation panel (.nav-primary > .nav-side) inside the 'nav' element.
是否可以通过任何方法构造左侧导航面板以占据部分内容宽度的一定百分比（。
Is there any method by which I can structure the left navigation panel to take up a certain percent of width of section content (.section-content).
就像，我不希望将左侧导航面板放置在该部分内容的上方（使用固定位置或其他方式 >）。必须将其放置在使用相同HTML结构共享总宽度的部分内容的左侧。
Like, I don't want the left navigation panel to be placed above the section content (using fixed position or something). It has to be placed left of the section content sharing the total width using the same HTML structure.
在此感谢
推荐答案
您可以结合使用CSS网格和 display：contents （ https://caniuse.com/#feat=css-display-contents ）以通过保持相同的HTML结构来实现：
You can combine the use of CSS-grid and display:contents (https://caniuse.com/#feat=css-display-contents) to achieve this by keeping the same HTML structure:
body {
margin:0;
height:100vh;
display:grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 100px 1fr;
grid-template-areas:
"header header"
"side content";
}
nav.nav-primary {
display:contents;
}
.heading-primary {
grid-area:header;
background:red;
}
.nav-side {
grid-area:side;
background:blue;
}
.section-content {
grid-area:content;
background:green;
}
<body>
<nav class="nav-primary">
<div class="heading-primary">
<!-- Logo & links of webpage -->
</div>
<div class="nav-side">
<!-- Left side navigation of the page -->
</div>
</nav>
<section class="section-content">
<!-- Contents of the web page -->
</section>
</body>
这篇关于父级与CSS的同胞占用宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
