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

i've this code of two images in the two sides of the screen

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

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

Then I have two images and a text in the center of the screen - between the two images above

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

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

this is the css .row.block01 img1 { float:center ; align:center }

这是css .row.block01 img1 {float:center;居中对齐 }

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

the problem is that when the width of the screen becomes smaller the two images in the middle become one above the text and one below the text only whe the screen become more small all the text move down and the two images is again in it's two sides.

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

2 个解决方案

#1

You could force the p tag to maintain a min-width, which would stop the images from restacking, but you haven't posted what your desired functionality is.

您可以强制p标签保持最小宽度,这将阻止图像重新打包,但您尚未发布所需功能。

Try this in your css:

在你的CSS中尝试这个:

p {
    min-width: 800px;
}

#2

There is no float: center. You can center the element by using the code:

没有浮动:中心。您可以使用以下代码使元素居中:

.center { margin-left: auto; margin-right: auto; width: 70%; background-color: #b0e0e6; } .

.center {margin-left:auto; margin-right:auto;宽度:70%; background-color:#b0e0e6; }。

Set both margin-left and margin-right to auto like above. You can find more examples at w3schools.com. That code could be causing your error. You should also enclose the p tag in a div, then set a min-width for the div. This will help with your organization later on.

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

#1