Question

我已经创建了这个网页，当我在浏览器上全屏显示时，它工作得非常好，但是当我将浏览器的屏幕大小更改为非全屏时，页面会混乱，图像移动到左侧而不是保持在右侧。另外，我怎么能在这个div类下面再添加3组呢。

页面看起来如何正常： http://i.stack.imgur.com/aOVTx.png

不全屏时页面的外观如何： http://i.stack.imgur.com/KmsH3.png

我的HTML：

<div class="howitworks">
<img class="imghow" src="https://www.realtyshares.com/media/default/howitworks/signup.png" />
<p class="howitworks"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet laoreet augue. Nulla consectetur purus convallis dolor viverra, sed vehicula dolor sagittis. Sed placerat, tellus vel pretium pharetra, felis metus varius lectus, et varius metus arcu et sapien. Maecenas ac lorem eu metus facilisis laoreet. Sed ullamcorper, lectus sed imperdiet gravida, nisl erat aliquam leo, nec pellentesque diam nunc ut augue. Suspendisse quis massa sit amet nulla posuere vulputate vel quis nisl. Fusce nisl sem, suscipit quis egestas vel, ullamcorper vitae dui.</p>
</img>
</div>

我的CSS：

.howitworks
{
   width: 984px;
   height: 56px;
   padding: 0 20px;
   text-align: right;

}
img.imghow
{
   display: block;
   float: right;


}
p.howitworks
{
text-align: left;
width: 650px;
}

Answer 1

响应已经说过了。像素没有响应。你必须使用百分比。

在你继续学习之前，你应该阅读一些有关回应的内容。

反正。在这个小提琴中，我展示了百分比的工作原理：http://jsfiddle.net/HJLXX/1/

它始终保持在右侧，当窗口调整大小时，p和img都会调整大小。

.howitworks {
    width: 100%;
    max-width: 800px;
}

img.imghow {
    float: right;
    width:30%;
}

p.howitworks {
    text-align: left;
    width: 70%;
}

HTML / CSS代码无响应

1 个答案: