3列のレスポンシブディビジョン

こんにちは、テキスト、画像、ビデオで3つのdivがあります。私のブラウザではうまく見えますが、私のページが小さければ（応答性が高い）、ビデオと画像は見えません。3列のレスポンシブディビジョン

<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>

この場合、シングラー列を作成します。ディスプレイと

出典

2017-11-27 Aris Guimerá

使用するメディアクエリ：この

@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>

出典

2017-11-27 14:23:43 Gattbha

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>

ようなテーブル行

出典

2017-11-27 15:15:19

3列のレスポンシブディビジョン

答えて

関連する問題