Question

我有这个代码屏幕两侧的两个图像

<p>
    <img class= "imgright" alt="מתן לוי טיפול בכעס" src="images/treatment-of-anger.jpg" />
    <a href ="http://www.anger.co.il">
         <img class= "imgleft" alt="מתן לוי טיפול בכעס" src="images/Bkalut-treatment-of-anger.png" />
    </a>
</p>
<p>

然后我在屏幕中央有两个图像和一个文本 - 在上面的两个图像之间

<p>
    <h1>
         <a><img class="img1" src="images/anger.gif" alt="כעס"        style="float:center" > </a>
         כעס!!!
         <a><img class="img1" src="images/anger.gif" alt="כעס"> </a>
    </h1>
</p>
<p>
    <ul>

这是css .row.block01 img1 { 漂浮：中心; 居中对齐 }

.imgright
{
  float:right;
  width:62px;
  height:112px;
  padding:5px;

  margin: 5px 20px 5px 0px;
}

.imgleft
{
  float:left;
  width:102px;
  height:112px;
  padding:5px;

  margin: 5px 20px 5px 0px;
}

问题是，当屏幕的宽度变小时，中间的两个图像变为文本上方的一个，而文本下方的两个图像只有当屏幕变得更小时，所有文本向下移动，两个图像再次进入这是双方的。

Answer 1

你可以强制p标签保持最小宽度，这会阻止图像重新打包，但你还没有发布你想要的功能。

在你的css中试试这个：

p {
    min-width: 800px;
}

Answer 2

没有浮动：中心。您可以使用以下代码对元素进行居中：

.center { margin-left：auto; margin-right：auto; 宽度：70％; background-color：＃b0e0e6; }

将margin-left和margin-right设置为auto，如上所述。您可以在w3schools.com找到更多示例。该代码可能导致您的错误。您还应该将p标记括在div中，然后为div设置最小宽度。这将在以后帮助您的组织。

如何在屏幕尺寸改变时防止图像向下移动

2 个答案: