blocks|key|20590|text|您可以使用媒体查询。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|20591|工作JSFiddle+example+here|offset|length|20592|@media+screen+and+(min-width:+768px)+{
++.video+{
++++width:+65%25;
++++float:left;
++}
++.sidebar,+.related-video+{
++++width:+35%25;
++++float:+left;
++}
++.comment+{
++++width:+100%25;
++++float:+left;
++}
}

/*+Hide+the+related+video+in+screens+exceeding+768px+*/
@media+screen+and+(max-width:+768px)+{
+++.related-video+{
+++++display:+none;
+++}
}|code-block|syntax|javascript|20593|我定义了当屏幕是MINIMUM+/至少768px宽的时候，CSS应该如何反应。|style|CODE|20594|20595|以65%25的屏幕显示视频。|unordered-list-item|20596|以35%25显示侧边栏和相关视频。|20597|和评论以100%25显示，因为前100%25已被填满。|20598|在宽度大于768px的屏幕中隐藏相关视频。|20599|20600|你可以使用read+up+on+media+queries+here|20601|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/5odmk38u/1/|1|https://www.w3schools.com/css/css3_mediaqueries_ex.asp^0|0|2|L|0|0|0|8|7|0|0|0|0|0|0|0|5|T|1|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|F|3|G|5|H|7|1G|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1H|8|@$D|1I|E|1J|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1L|8|@]|9|@]|A|$]]|$1|S|3|T|5|R|7|1M|8|@]|9|@]|A|$]]|$1|U|3|V|5|R|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|R|7|1O|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1Q|8|@]|9|@$D|1R|E|1S|1|1T]]|A|$]]|$1|11|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18]]|19|$5|14|15|16|A|$17|1A]]]]

You can use media queries.

Working <a href="https://jsfiddle.net/5odmk38u/1/" rel="nofollow noreferrer">JSFiddle example here</a>

<pre><code>@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;
 }
}
</code></pre>

I defined how the CSS should react when the screen is <code>MINIMUM</code> / at least 768px wide - which is;

<ul>
<li>Show the video in 65% of the screen.</li>
<li>The sidebar and related video in 35%.</li>
<li>And the comments in 100%, which will be on the next "line", because the first 100% are already filled up.</li>
<li>Hide related videos in screen larger than 768px wide.</li>
</ul>

You can <a href="https://www.w3schools.com/css/css3_mediaqueries_ex.asp" rel="nofollow noreferrer">read up on media queries here</a>

blocks|key|20670|text|可以使用flex+order和float完成此操作|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|20671|<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;}
}|code-block|syntax|javascript|20672|https://jsfiddle.net/09jnamna/|20673|entityMap|0|LINK|mutability|MUTABLE|url^0|4|4|9|5|F|5|0|0|0|U|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|M|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

It can be done using <code>flex</code> <code>order</code> and <code>float</code>

<pre><code>&lt;div class="content"&gt;
 &lt;div class="recommended"&gt;Recommended&lt;/div&gt;
 &lt;div class="video"&gt;Video&lt;/div&gt;
 &lt;div class="comments"&gt;Comments&lt;/div&gt;
&lt;/div&gt;

.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;}
}
</code></pre>

<a href="https://jsfiddle.net/09jnamna/" rel="nofollow noreferrer">https://jsfiddle.net/09jnamna/</a>

In mobile version of youtube video page, the content goes as follows:

<ul>
<li>Video</li>
<li>Related Videos</li>
<li>Comments</li>
</ul>

But in web browser desktop version, Related Videos turns into a sidebar right to both Video and Comments sections.

How did they do that? Their source code is way complex, and I can not figure it out. Could it be done somehow using css grid or <code>flexbox</code>?

So, the start point is:

HTML

<pre><code>&lt;div id="video"&gt;Video&lt;/div&gt;
&lt;div id="related"&gt;Related Videos&lt;/div&gt;
&lt;div id="comments"&gt;Comments&lt;/div&gt;
</code></pre>

CSS

<pre><code>#video {}
#related {}
#comments {}

@media (max-width:768px) {
 #video {}
 #related {}
 #comments {}
}
</code></pre>

Big thx

EDIT

I guess it is not safe, but it does what I need:

CSS

<pre><code>@media (max-width:768px) {
 #container * {display:block;}
}
</code></pre>

HTML

<pre><code>&lt;table id="container"&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;h3&gt;Topic Title&lt;/h3&gt;
 &lt;p&gt;Non-fixed height content&lt;/p&gt;
 &lt;/td&gt;
 &lt;td rowspan="2"&gt;
 &lt;h3&gt;Related topics&lt;/h3&gt;
 &lt;p&gt;Topic title 1&lt;/p&gt;
 &lt;p&gt;Topic title 2&lt;/p&gt;
 &lt;p&gt;Topic title 3&lt;/p&gt;
 &lt;p&gt;Topic title 4&lt;/p&gt;
 &lt;p&gt;Topic title 5&lt;/p&gt;
 &lt;p&gt;Topic title 6&lt;/p&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;h3&gt;Comments&lt;/h3&gt;
 &lt;p&gt;Comment 1&lt;/p&gt;
 &lt;p&gt;Comment 2&lt;/p&gt;
 &lt;p&gt;Comment 3&lt;/p&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

CSS: Youtube-like video page layout

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在移动版youtube视频页面中，内容如下：VideoRelated VideosComments但在web浏览器桌面版本中，相关视频变成了侧边栏，同时指向视频和评论部分。他们是怎么做到的？他们的源代码太复杂了，我搞不懂。是否可以使用css grid或flexbox以某种方式完成因此，起点是：HTML<div id="...

问CSS:类似Youtube的视频页面布局
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:类似Youtube的视频页面布局EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:类似Youtube的视频页面布局
EN