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%;">

因此，您将此作为容器，它将拉伸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

Answer 2

<div class="swd-layout-cell layout-item-2" style="width: 100%;">
    <p style="clear:both;">
        <img alt="" src="images/new.jpg" style="float: left;margin-right:20px; width:50%; max-width:450px;" 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>

文本位置在不同大小的监视器上移动

2 个答案:

HTML：

HTML：

CSS：