Question

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

将此视为一张桌子。可以获取文本上方的图像，但不能低于下方。用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解决方案。

Answer 1

我想最简单的方法是为文本创建两个不同的元素。第一个将位于图像上方，另一个位于图像右侧。并且您将根据屏幕大小隐藏每个元素

示例：

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

当屏幕尺寸缩小时，将左侧元素移动到右侧元素下方

1 个答案: