手机版youtube视频页面,内容如下:
- 视频
- 相关视频
- 评论
但在网络浏览器桌面版中,相关视频变成了视频和评论部分的侧边栏。
他们是怎么做到的?他们的源代码太复杂了,我搞不懂。可以使用 css 网格或 flexbox
以某种方式完成吗?
所以,起点是:
HTML
<div id="video">Video</div>
<div id="related">Related Videos</div>
<div id="comments">Comments</div>
CSS
#video {}
#related {}
#comments {}
@media (max-width:768px) {
#video {}
#related {}
#comments {}
}
非常感谢
编辑
我猜它不安全,但它满足了我的需要:
CSS
@media (max-width:768px) {
#container * {display:block;}
}
HTML
<table id="container">
<tr>
<td>
<h3>Topic Title</h3>
<p>Non-fixed height content</p>
</td>
<td rowspan="2">
<h3>Related topics</h3>
<p>Topic title 1</p>
<p>Topic title 2</p>
<p>Topic title 3</p>
<p>Topic title 4</p>
<p>Topic title 5</p>
<p>Topic title 6</p>
</td>
</tr>
<tr>
<td>
<h3>Comments</h3>
<p>Comment 1</p>
<p>Comment 2</p>
<p>Comment 3</p>
</td>
</tr>
</table>
最佳答案
可以使用 flex
order
和 float
来完成
<div class="content">
<div class="recommended">Recommended</div>
<div class="video">Video</div>
<div class="comments">Comments</div>
</div>
.content {}
.recommended {float:right;}
.video {}
.comments {}
@media (max-width:768px) {
.content {display:flex;flex-direction:column;}
.recommended {order:2;}
.video {order:1;}
.comments {order:3;}
}
关于html - CSS:类似 Youtube 的视频页面布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50300550/