CSS:类似Youtube的视频页面布局
CSS:类似Youtube的视频页面布局
提问于 2018-05-12 05:33:03
在移动版youtube视频页面中，内容如下：
- Video
- Related Videos
- Comments
但在web浏览器桌面版本中，相关视频变成了侧边栏，同时指向视频和评论部分。
他们是怎么做到的？他们的源代码太复杂了，我搞不懂。是否可以使用css grid或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 {}
}大thx
编辑
我猜它是不安全的，但它做了我需要的：
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>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-01 08:15:45
可以使用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;}
}Stack Overflow用户
发布于 2018-05-12 05:56:46
您可以使用媒体查询。
@media screen and (min-width: 768px) {
.video {
width: 65%;
float:left;
}
.sidebar, .related-video {
width: 35%;
float: left;
}
.comment {
width: 100%;
float: left;
}
}
/* Hide the related video in screens exceeding 768px */
@media screen and (max-width: 768px) {
.related-video {
display: none;
}
}我定义了当屏幕是MINIMUM /至少768px宽的时候，CSS应该如何反应。
- 以65%的屏幕显示视频。
- 以35%显示侧边栏和相关视频。
- 和评论以100%显示，因为前100%已被填满。
- 在宽度大于768px的屏幕中隐藏相关视频。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50300550
复制相关文章
相似问题