Question

以下是我的HTML＆amp;我编写的CSS代码适用于常规PC监视器的水平视图，但是当调整页面大小以检查它在移动视图的垂直格式中的外观时我会遇到问题。实际页面窗口的附加图像以及页面调整大小时元素看起来如何不平衡。如何克服这种对齐问题？

的的index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">  
    <center>
        <div style="width:30%; float:left; margin: 30px; ">
            <img src="images/img.jpg" alt="image" width="350" height="350">
        </div>
    </center>

    <center>
        <div style="width:60%; float:right; margin: 30px; text-align:justify; text-justify:inter-word;">
            <p><span style="font-size: 20px; line-height:150%;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </span></p>
        </div>
    </center>
    <br style="clear:both;" />
</div>
</body>
</html>

的的style.css

#content {
    max-width: 80%;
    max-height: 85%;
    padding: 10px;
    border-radius:5px;
    margin: 10px auto;
    background-color:rgba(255,229,194,1);
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

图片

实际页面视图 Actual Page View

调整页面视图 Resized Page view

Answer 1

您正在使用基于百分比和边距像素的宽度。

<10>（30px + 30px）* 2 + 30％+ 60％在屏幕宽度的10％小于边距之和时变得大于100％（边缘因左右而加倍）。这会导致第二个div被推到第一个。

也可以使用百分比作为边距。

两个div的两边都有边距，剩余10％的屏幕宽度，因此将它们更改为 2.5％。

Working demo

<div id="content">  
    <center>
        <div style="width:30%; float:left; margin: 2.5%; ">
            <img src="images/img.jpg" alt="image" width="350" height="350">
        </div>
    </center>

    <center>
        <div style="width:60%; float:right; margin: 2.5%; text-align:justify; text-justify:inter-word;">
            <p><span style="font-size: 20px; line-height:150%;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </span></p>
        </div>
    </center>
    <br style="clear:both;" />
</div>

Answer 2

<强> Working Fiddle

只需从margin: 30px;移除div's即可。相反，如果需要，请在％age中使用margin。

px中的任何内容都会在调整大小时（或在较小的设备上）出现两个问题，或者它会在div's附近降低，就像在你的情况下文字正在向下移动或它会带来水平调整大小（在较小的设备上）。

祝你好运！

如果页面调整大小，HTML页面元素将失去平衡

的的index.html

的的style.css

2 个答案: