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

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 { float :中心； 居中对齐

.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;
}