随着屏幕尺寸缩小，将左侧元素移动到右侧元素

问题描述：

想要在左侧显示右侧带有文本的图像。随着屏幕宽度减小，要将左侧图像移动到右侧文本下方。随着屏幕尺寸缩小，将左侧元素移动到右侧元素

试过这个表格。可以在文字上方显示图像，但不能在下方显示。与DIV尝试了几个不同的东西，并没有一个能正常工作。

HTML：

<h2>Method 1</h2> 
<table class="table"> 
<tr> 
    <th><img src="http://placehold.it/240x320/f00/000.png&text=100x100" width="100" height="100" /></th> 
    <td>blah blah blah</td> 
</tr> 
<tr> 
    <th><img src="http://placehold.it/240x320/0f0/000.png&text=100x120" width="100" height="120" /></th> 
    <td>another line of text</td> 
</tr> 
</table> 

<h2>Method 2</h2> 
<div> 
    <div class="right-or-top">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</div> 
    <div class="left-or-bottom"><img src="http://placehold.it/240x320/f00/000.png&text=100x100" width="100" height="100" /></div> 
</div> 
<div> 
    <div class="right-or-top">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</div> 
    <div class="left-or-bottom"><img src="http://placehold.it/240x320/0f0/000.png&text=100x120" width="100" height="120" /></div> 
</div>

CSS：

.table, .table td, .table th, div { 
    border: 1px solid black; 
} 
@media (max-width: 767px) { 
    .table, thead, tbody, th, td, tr { 
     display: block; 
    } 
    .table tbody > tr > th { 
     border-top: none; 
     padding: 0; 
     text-align: center; 
     margin: 0 auto; 
    } 
} 

.left-or-bottom { 
    display: inline-block; 
    width: 110px; 
} 
.right-or-top { 
    display: inline-block; 
    margin-left: 120px; 
} 
@media (max-width: 767px) { 
    .left-or-bottom { 
     display: block; 
     width: 100%; 
     text-align: center; 
    } 
    .right-or-top { 
     display: block; 
     width: 100%; 
     margin-left: 0; 
    } 
}

也想声明有此页面上有很多其他的事情对双方...这使得绝对定位困难。也期待避免一个javascript解决方案。

答

我想最简单的方法是为文本创建两个不同的元素。第一个将在图像上方，另一个在图像右侧。而且你要根据屏幕大小

例如隐藏的每个元素：

@media (min-width: 767px) { 

.rightToTop1 { 
    display:none; 
    border-top: none; 
    padding: 0; 
    text-align: center; 
    margin: 0 auto; 
} 
.rightToTop2 { 
    display:block; 
    border-top: none; 
    padding: 0; 
    text-align: center; 
    margin: 0 auto; 
} 
} 
@media (max-width: 767px) { 

.rightToTop1 { 
    display:block; 
    border-top: none; 
    padding: 0; 
    text-align: center; 
    margin: 0 auto; 
} 
.rightToTop2 { 
    display:none; 
    border-top: none; 
    padding: 0; 
    text-align: center; 
    margin: 0 auto; 
}

和HTML：

<div class="right-or-top1">Blah Blah Blah Blah Blah Blah Blah</div> 
<div class="left-or-bottom"><img src="sample.jpg"/></div> 
<div class="right-or-top2">Blah Blah Blah Blah Blah Blah Blah</div>

随着屏幕尺寸缩小，将左侧元素移动到右侧元素

相关推荐