Question

这是我整个网站的代码，希望这有帮助！ -------------------------------------------------- -------------------------------------------------- ----------------------------

HTML

<!DOCTYPE html> 
<head>
    <link rel="stylesheet" href="stylesheet.css">
    <title>Toontown Classic</title>
    <meta name='description' content='Official website of Toontown Classic.'/>
    <meta name='keywords' content='toontown, toontown online, toontown infinite, toontown'/>
    <link rel="icon" type="image/ico" href="favicon.ico">
</head>
</head>
    <body>
        <!--Background-->
        <div id="background">
            <img src="blue.jpg" class="stretch" alt="" />
        </div>
        <!--Logo-->
        <div align = "center">
            <img src = "TT_Logo.png">
        </div>
        <!--Nav Bar-->
        <div align = "center">
            <p><div style="width:900px;height:60px;-webkit-border-radius: 10px;-moz-border-    radius: 10px;border-radius: 10px;background-color:white; opacity:0.52;"></div></p>       
        </div>
        <!--Bottom Content Box-->
        <div align = "center">
            <p><div style="width:900px;height:900px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background-color:white; opacity:0.52;"></div></p>
        </div>
        <!--Date&By-->
        <div id="DateAndBy">
            <div align = "center">
                <p>Posted by Sir Biscuit, November 5, 2014</p>
            </div>
        </div>
            <div id="NewsPosts">
                <p>Toontown Classic is coming soon! Toontown Classic is coming soon! Toontown Classic is coming soon! Toontown Classic is coming soon!</p>
    </div>
 </body>

CSS

body {
font-family: Tahoma, Verdana, Segoe, sans-serif;
}
#background {
width: 100%; 
height: 100%; 
position: fixed; 
left: 0px; 
top: 0px; 
z-index: -1; 
}
.stretch {
width:100%;
height:100%;
}
#DateAndBy {
position: relative;
bottom: 0px;
top: -930px;
font-size: 30px; 
margin-left: 10; 
margin-right: 10; 
text-indent: 5; 
}
#NewsPosts{
position: relative;
bottom: 0px;
top: -925px;
width: 45%;
margin: 0 auto;
font-size: 20px; 
margin-left: 10; 
margin-right: 10; 
text-indent: 5; 
}

希望这段代码有所帮助，请注意我是网络开发的新手，所以请不要讨厌：）

Answer 1

我认为这是因为您使用了基于百分比的尺寸。尝试将width: 45%;更改为width: 600px;

Answer 2

我注意到你的左边距或右边距没有给出值，也没有给出文字缩进 - 仅仅是数字，这是必要的，而你的计算机很可能试图通过强制猜测像素，ems或百分比。

您必须选择最适合您项目的度量单位，即使它们可以在三个像素，ems或百分比之间进行转换。

由于您已经指定了像素，我建议您选择像素数以使文本达到您想要的大小。我还建议你继续推广自动＆＃39;属性，因为它可以强制您的代码与已存在的像素一致。

Answer 3

请删除页面中的内嵌样式并使其成为一个类

HTML：

<div style="width:900px;height:900px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background-color:white; opacity:0.52;display: inline-block;">
    <div id="NewsPosts">
            <p>Toontown Classic is coming soon! Toontown Classic is coming soon! Toontown Classic is coming soon! Toontown Classic is coming soon!</p>
    </div>
</div>

CSS：

#NewsPosts {
    margin-left: 10px;
    margin-right: 10px;
    text-indent: 5px;
    position: relative;
    bottom: 0px;
    width: calc(100% - 20px);
    margin: 0 auto;
    font-size: 20px;
    text-align: justify;
    display: inline-block;
    padding: 10px;
}

#NewsPosts p {
    text-align:justify;
}

这可以解决您的问题。

在重新调整网页大小时，文本会变小并创建更多行

3 个答案: