随着屏幕尺寸缩小,将左侧元素移动到右侧元素
问题描述:
想要在左侧显示右侧带有文本的图像。 随着屏幕宽度减小,要将左侧图像移动到右侧文本下方。随着屏幕尺寸缩小,将左侧元素移动到右侧元素
试过这个表格。可以在文字上方显示图像,但不能在下方显示。 与DIV尝试了几个不同的东西,并没有一个能正常工作。
https://jsfiddle.net/nrah8zc1/
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>