我對css知之甚少。div這個問題對你來說可能很愚蠢。我在使用display : flex
Let me explain時遇到了轉移問題：
這是我的模板：
*{
margin: 0;
padding: 0;
text-decoration: none;
}
.container{
width: 100%;
display: flex;
}
.sidebar{
background: grey;
width: 280px;
height: 100vh;
color: white;
}
.header{
background: orange;
height: 80px;
width: 100%;
}
.content{
float: right;
}<div class="container">
<div class="sidebar">sidenav</div>
<div class="header">header</div>
<div class="content">content</div>
</div>.content放在同一行的最后。我想要它低于.header
我想要的：
uj5u.com熱心網友回復：
您可以重新排列 div 以滿足您的要求。如下所示：
* {
margin: 0;
padding: 0;
text-decoration: none;
}
.container {
width: 100%;
display: flex;
}
.column {
flex-direction: column;
}
.sidebar {
background: grey;
width: 280px;
height: 100vh;
color: white;
}
.header {
background: orange;
height: 80px;
width: 100%;
}
.content {
float: right;
}<div class="container">
<div class="sidebar">sidenav</div>
<div class="container column">
<div class="header">header</div>
<div class="content">content</div>
</div>
</div>jsFiddle：https ://jsfiddle.net/vcdu0tjo/1/
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467530.html
上一篇：懸停時未出現元素
下一篇：Alt標簽頁標題“影片”