使用CSS div进行定位
使用CSS div进行定位
提问于 2018-06-22 02:28:21
我有这个css代码的问题，我需要把一个栏目放在右边的2个广告，并在左边的嵌入式视频，但视频必须有100%的宽度。
.title-video {
font-size: 17px;
}
.video-preview {
width: 100%;
height: 460px;
}
.video-ad {
position: relative;
float: right;
width: 36.3%;
max-width: 338px;
min-height: 1px;
text-align: center;
margin-left: 4px;
text-align: right;
}<div class="content">
<h1 class="title-video">El Chavo del 8 - El Pollo asado de Doña Cleotilde (Capitulo Completo)</h1>
<div class="content-video">
<div id="video-ad">
<a href="" target="_blank" rel="noopener"><img src="http://nuestroportal.mx/wp-content/uploads/2018/06/IMG-20180612-WA0010-338x235.jpg"></a>
<a href="" target="_blank" rel="noopener"><img src="http://theindiaobserver.com/wp-content/uploads/2018/06/IMG-20180611-WA0013-338x235.jpg"></a>
</div>
<iframe class="video-preview" src="https://www.youtube.com/embed/L3YhvfTTQHg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
回答 2
Stack Overflow用户
发布于 2018-06-22 03:28:48
看看如何使用flex box。它使定位工作变得非常容易！
这是你可以做的一件事的快速想法
.main-wrapper {
display: flex;
flex-direction: row;
}
.video {
flex: 1; /*This would make your video div take up all the extra space that your column doesn't use*/
background-color: green;
}
.ads {
flex: 0 0 100px; /*You'd set whatever width you'd want for your right hand column */
background-color: red;
}``
<div class="main-wrapper">
<div class="video">
you're video can go here
</div>
<div class="ads">
You're adds can go here
</div>
</div>
Stack Overflow用户
发布于 2018-06-22 03:33:42
使用flex-box可以解决这个问题。
/* New CSS */
.content-video {
display: flex;
flex-direction: row-reverse;
}
.video-preview {
flex: 1;
}
video-ad {
flex: 0;
}
/*****/
.title-video {
font-size: 17px;
}
.video-preview {
/* width: 100%; */
height: 460px;
}
.video-ad {
position: relative;
float: right;
width: 36.3%;
max-width: 338px;
min-height: 1px;
text-align: center;
margin-left: 4px;
text-align: right;
}<div class="content">
<h1 class="title-video">El Chavo del 8 - El Pollo asado de Doña Cleotilde (Capitulo Completo)</h1>
<div class="content-video">
<div class="video-ad">
<a href="" target="_blank" rel="noopener">
<img src="http://nuestroportal.mx/wp-content/uploads/2018/06/IMG-20180612-WA0010-338x235.jpg" />
</a>
<a href="" target="_blank" rel="noopener">
<img src="http://theindiaobserver.com/wp-content/uploads/2018/06/IMG-20180611-WA0013-338x235.jpg" />
</a>
</div>
<iframe class="video-preview" src="https://www.youtube.com/embed/L3YhvfTTQHg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50975351
复制相关文章
相似问题