有3列的响应分区
有3列的响应分区
提问于 2017-11-27 14:10:28
嗨，有三个div与文字，图像和维迪奥。在我的浏览器上看起来很好，但当我做我的页面小(响应)不能看到视频和图像。
<style type="text/css">
.wrap {
display: table;
}
.wrap div{
display: table-cell;
vertical-align: top;
padding: 20px;
}
</style>
<div class="wrap">
<div class="">
<span><strong>text:</strong></span><br>
<span>text</span><br>
<span>text</span><br>
<span>text</span><br>
<span><strong>text:</strong></span><br>
<span>text</span><br>
</div>
<div class="">
<img src="myimage.jpg">
</div>
<div class="">
<iframe width="560" height="315" src="myvideourl" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>在这种情况下，我想做一个singler列。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-11-27 14:23:43
使用媒体查询显示:表行，如下所示
@media only screen and (max-width: 767px) {
.wrap div{
display: table-row;
vertical-align: top;
padding: 20px;
text-align:center;
}
}
.wrap {
display: table;
}
.wrap div{
display: table-cell;
vertical-align: top;
padding: 20px;
}
@media only screen and (max-width: 767px) {
.wrap div{
display: table-row;
vertical-align: top;
padding: 20px;
text-align:center;
}
}<div class="wrap">
<div class="">
<span><strong>text:</strong></span><br>
<span>text</span><br>
<span>text</span><br>
<span>text</span><br>
<span><strong>text:</strong></span><br>
<span>text</span><br>
</div>
<div class="">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<div class="">
<iframe width="560" height="315" src="myvideourl" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
Stack Overflow用户
发布于 2017-11-27 15:15:19
body,html{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrap{
width:100%;
height:100%;
}
.sub{
float:left;
height:100%;
overflow:auto;
display:block;
min-width:100px;
}
.sub1{
width:calc((100% - 560px)/2);
}
.sub2{
width:calc((100% - 560px)/2);
}
.sub3{
width:560px;
}
iframe{
width:calc(100% - 2px);
height:calc(100% - 2px);
border:1px solid black;
}
@media only screen and (max-width: 760px) {
.wrap {
overflow-y:auto;
}
.wrap .sub{
width:100%;
}
}<html>
<body>
<div class="wrap">
<div class="sub sub1 ">
<span><strong>text:</strong></span><br>
<span>text</span><br>
<span>text</span><br>
<span>text</span><br>
<span><strong>text:</strong></span><br>
<span>text</span><br>
</div>
<div class="sub sub2">
<img src="myimage.jpg">
</div>
<div class="sub sub3">
<iframe src="myvideourl" frameborder="0" allowfullscreen="" src=""></iframe>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47512927
复制相关文章
相似问题
腾讯云开发者
