我一直在嘗試各種方法來解決這個問題（網格 / 浮動 / flexbox ...），但找不到正確的解決方案。總有一些障礙。
該頁面遵循 5 個元素的簡單布局，在移動/桌面上的位置不同。附圖很好地描述了它。
規則如下：
- 所有塊可以是任意高度，也可以是空的（取決于它們的內容）（主體和標題總是有一些內容）
- 在移動設備上，主側邊欄的文本需要圍繞它流動
- 為了解決這個問題，不能復制任何內容（也許只有照片就可以了）。此外，JS 不能用于根據螢屏大小移動元素。
- 塊之間不能有空格（唯一的例外是主側邊欄和主體之間的移動空間，如果側邊欄沒有足夠的內容比照片高）
添加的代碼示例是許多嘗試過的解決方案之一，但正如您所見（一旦將其放大到桌面大小），一旦主體足夠高，它就會向下推輔助邊欄。
img {max-width: 100%;}
.grid_content {overflow: auto;}
.grid_content > * {background-color: rgba(0,0,0,0.2); box-sizing: border-box;}
.photo_cont {width: 25%; float: left; background-color: rgba(150,100,200,0.2);}
.sidebar {width: 25%;}
.sidebar_primary {width: 25%; float: left; clear: left; background-color: rgba(250,100,0,0.2);}
.main_h {width: 75%; overflow: auto; border-color: red;}
.main_box {width: 75%; overflow: auto; background-color: rgba(150,200,0,0.2);}
.sidebar_secondary {float: left; clear: left; border-color: red; background-color: rgba(250,100,0,0.2);}
@media (max-width: 992px) {
.photo_cont {float: right; width: auto;}
.main_h {width: 100%; overflow: initial;}
.sidebar_primary {float: none; width: 100%;}
.main_box {width: 100%;}
.sidebar_secondary {float: none; width: 100%;}
}<div class="grid_content">
<div class="photo_cont">Photo<br><img src="https://via.placeholder.com/90x110"></div>
<div class="main_h">Heading</div>
<div class="sidebar sidebar_primary">Sidebar - primary<br>P<br>P<br>P<br>P</div>
<div class="main_box">Main body<br>T<br>T<br>T<br>T<br>T<br>T<br>T<br>T<br>T<br>T<br>T<br>T<br>T<br>T<br>T<br>T<br>T</div>
<div class="sidebar sidebar_secondary">Sidebar - secondary<br>S<br>S<br>S<br>S</div>
</div>uj5u.com熱心網友回復：
您可以使用 css 網格來定位您的元素，就像這樣。 桌面圖片
.grid_content {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.main_h {
grid-column: 1/1;
background-color: cadetblue;
}
.photo_cont {
grid-column: 2/2;
grid-row: 1 / span 2;
background-color: blueviolet;
}
.sidebar_primary {
grid-column: 1/1;
grid-row: 2/2;
overflow: auto;
background-color: blue;
}
.main_box {
grid-column: 1 / span 2;
grid-row: 3/3;
background-color: bisque;
}
.sidebar_secondary {
background-color: aqua;
grid-column: 1 / span 2;
grid-row: 4/4;
}
@media screen and (min-width: 900px) {
.grid_content{
grid-template-columns: 1fr 2fr;
}
.main_h {
grid-column: 2/2;
}
.main_box {
grid-column: 2/2;
grid-row: 2 / span 5;
}
.photo_cont {
grid-column: 1/1;
grid-row: 1 / span 2;
}
.sidebar_primary {
grid-column: 1/1;
grid-row: 3 / span 2;
}
.sidebar_secondary {
grid-column: 1/1;
grid-row: 5 / span 2;
}
}
uj5u.com熱心網友回復：
你可以嘗試這樣的事情。我為您放置了一個模態，這是針對縱向移動版本的，但是如果您想要一個橫向移動，您可以將媒體查詢移動到它上面。
.leftside {
width:25%;
height:auto;
}
.photo {
height:200px;
width:100%;
background-color:pink;
color:white;
margin:0 auto;
text-align:center;
}
.sidebarprimary {
background-color:green;
height:300px;
color:white;
text-align:center;
}
.sidebarsecondary {
background-color:lightgreen;
height:300px;
color:white;
text-align:center;
}
.rightside {
width:73%;
float:right;
color:white;
text-align:center;
}
.heading {
width:100%;
height:80px;
background-color:lightblue;
}
.body {
width:100%;
height:740px;
background-color:gray;
}
@media only screen and (max-width:479px){
.rightside {
width:100%;
float:none;
}
.leftside {
width:100%;
}
.heading {
width:50%;
left:0;
margin-right:10px;
height:50px;
}
.photo {
width:50%;
position:absolute;
right:0;
top:0;
margin:8px;
height:200px;
z-index:1;
}
.body {
margin-top:300px;}
.sidebarprimary {
width:95%;
left:0;
right:0;
top:60px;
position:absolute;
margin:10px;
}
}<div class="rightside">
<div class="heading">HEADING</div><br>
<div class="body">THIS IS YOUR BODY</div>
</div>
<div class="leftside">
<div class="photo">THIS IS YOUR PHOTO</div>
<br>
<div class="sidebarprimary"> THIS IS YOUR SIDEBAR PRIMARY</div><br>
<div class="sidebarsecondary"> THIS IS YOUR SIDEBAR SECONDARY</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/444998.html