html - 文本位置在不同尺寸的显示器上四处移动

Question

这是我的代码:

<div class="swd-layout-cell layout-item-2" style="width: 100%">
    <p>
        <img width="450" height="400" alt="" src="images/new.jpg" style="float: left;margin-right:20px" class="">
    </p>
     <h5>CloudMoV</h5>

     <h6>Mobile users can import a live or on-demand video to watch from any video streaming site.&nbsp;</h6>

     <h6>Invite your friends to watch the video concurrently.&nbsp;</h6>

     <h6>Chat with your friends while enjoying the video.</h6>

    <br>
</div>

图像显示在左侧，文本显示在右侧。但在不同尺寸的显示器上，文本位置有所不同。在一台显示器上，位置是正确的，而在另一台显示器上，文本出现在图像下方。

我该如何解决这个问题？

Answer 1

这是由 width: 100%; 引起的。

HTML:

<div class="swd-layout-cell layout-item-2" style="width: 100%;">

所以你将它作为你的容器，它将拉伸(stretch) 100% 屏幕。在演示中，随意调整窗口大小，您会看到文本四处移动。

这是因为当窗口为 500px 时，图像占用 400px。因此，您的文本正试图进入 100px 的空间。

DEMO HERE

---

您可以设置一个 min-width 来阻止 cotainer 变小，这样它就不会挤压文本。

HTML:

<div class="swd-layout-cell layout-item-2" style="width: 100%; min-width: 700px;">

所以在这里你可以看到我们设置了一个 min-width，这很好用，因为它会阻止容器变小。

DEMO HERE

---

另一种选择是使用媒体标签。现在这些用于帮助设计各种分辨率的网站。

CSS:

div {
    width: 100px;
    height: 100px;
}
@media screen and (min-width: 1080px) {
   div {
        background: blue;
    }
}
@media screen and (min-width: 487px) and (max-width: 1079px) {
    div {
        background: green;
    }
}
@media screen and (max-width: 487px) {
   div {
        background: red;
    }
}

所以这是一个快速演示，向您展示它们的作用。它根据屏幕大小使用不同的 CSS。因此，在您的代码中使用它可以让您根据屏幕大小自定义布局。

DEMO HERE