Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 将空间百分比指定给子组件的子组件_Html_Css_Reactjs_Flexbox - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html 将空间百分比指定给子组件的子组件

Html 将空间百分比指定给子组件的子组件

html css reactjs

Html 将空间百分比指定给子组件的子组件,html,css,reactjs,flexbox,Html,Css,Reactjs,Flexbox,我正在尝试构建一个react应用程序。将有一个侧栏，然后是一个主要部分。在图中，侧栏位于左侧，主体部分为右侧的所有部分。我想侧栏占总屏幕的35%，主部分占剩余的65%。因此，在我的app.js文件中，我有两个div，一个用于侧边，另一个用于主边。在css中，我有flex:.35和flex:.65。我更改了每个div的背景色，并且正确分配了空间 到目前为止一切都很好，现在我在flex的东西上遇到了麻烦，主要部分的子组件。在主节中，我希望顶部标题为20%，中间部分为60%，底部标题为20%。所以我为

我正在尝试构建一个react应用程序。将有一个侧栏，然后是一个主要部分。在图中，侧栏位于左侧，主体部分为右侧的所有部分。我想侧栏占总屏幕的35%，主部分占剩余的65%。因此，在我的app.js文件中，我有两个div，一个用于侧边，另一个用于主边。在css中，我有
flex:.35
和
flex:.65
。我更改了每个div的背景色，并且正确分配了空间

到目前为止一切都很好，现在我在flex的东西上遇到了麻烦，主要部分的子组件。在主节中，我希望顶部标题为20%，中间部分为60%，底部标题为20%。所以我为每个组件创建了3个div。然后我分配了
flex:.20
，
flex:.60
和
flex:.20
。然后，我更改了每个组件的背景色，以便可以看到分配的空间。什么也没有出现。您能解释一下如何对齐div以获得正确的空间百分比吗

所以我尝试了我的运气，通过使用
display:flex和
显示：网格在一起



*{
保证金：0；
}
.网格容器{
显示：网格；
网格模板列：35vw 65vw；
}
.左格{
背景#f2a154；
}
.右网格{
显示器：flex；
柔性流：柱包裹；
背景#314e52；
}
.柔性箱杆{
高度：20vh；
宽度：65vw；
}
.柔性箱体{
高度：60vh；
背景色：#f7f6e7；
}



侧栏
标题
身体
页脚

请添加一些代码以进一步解释您的概念。请添加您的代码，您不能期望有人从草稿开始编写所有内容。您太棒了，这正是我需要的！谢谢你的回答。