通過 mozilla 和 CSS 技巧自學 html/css
我目前有這個：
并想要這個：
我認為這將是相同的程序，但粉紅色 div 中的任何內容都不會顯示
HTML：
<div class="stack-1">
<div class="flexbox">
<div class="left">
<div class="flex-inside">
<div class="pos-inside">
<div class="icon-1">
CSS：“pos-inside”和“.icon-1”問題
.stack-1{
display:flex;
background:green;
}
.flexbox{
display: flex;
background: purple;
margin-left: 20px;
margin-right: 20px;
width: 100%;
height: 20%;
}
.thomas, .broke{
width: 50%;
height: 30px;
}
.left{
background-color: brown;
}
.right{
justify-content: flex-end;
display: flex;
background-color: aqua;
}
.flex-inside{
justify-content: center;
display: flex;
background: navy;
width: 60%;
height: 30px;
}
.flex-right{
background: hotpink;
width: 60%;
height: 30px;
}
.pos-inside{
color: orange;
<!--just trying out any heights-->
width: 40%;
height: 20px;
}
.icon-1{
color: purple;
<!--just trying out any heights-->
width: 10%;
height: 50%;
}
uj5u.com熱心網友回復：
是的，可以將 flexbox 放在 flexbox 中。作為一個實際的例子，在這個 stackoverflow 頁面上（至少在我寫這個答案時的當前實作中），我們有
<body>
<div class="container">
...
with the CSS rules
body {
display: flex;
}
body>.container {
display: flex;
}
至于您的特定示例，您的.leftdiv 的寬度為 0，因為未指定寬度且沒有內容。現在請注意，它的子 div.flex-inside具有 60% 的寬度。這是 0 的 60%，所以它的寬度也是 0，依此類推。
嘗試
.left{
background-color: brown;
width: 50%;
}
或者，別.left管它，嘗試給 一個特定的寬度.flex-inside：
.flex-inside{
...
width: 120px;
}
至于.pos-inside和.icon-1，你真的是這個意思color: ...，還是你的意思background: ...？同樣，沒有內容，所以設定文本顏色不會有任何影響。要么將屬性更改為background:，要么在 div 中添加一些文本以查看會發生什么。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/358359.html
上一篇：<p>和文本節點有什么區別？
下一篇：如何在Django問卷中顯示影像