我应该为社交网站做部分项目的一部分。 HTML文件本身不会做任何事情，它只是设计视觉部分。我必须做一些类似于朋友＆＃39;在Facebook的部分。
我使用了很多内联css，现在我认为这不是一个好主意。如果你能够尝试它，当你改变窗口的大小时，设计就会混乱。
你能帮助我或给我任何提示，所以这不会发生吗？非常感谢
<!doctype html>
<html>
<head>
<title> </title>
</head>
<body>
<div style="border:1px solid black; width:600px;height:900px;margin:auto;">
<p style="margin:auto; background-color:#f7f7f7;width:600px;height:70px;"></p>
<p style="font-size:20px;font-weight:bolder;position:absolute;top:0px;left:415px;">Amigos</p>
<p style="font-size:15px;font-weight:bolder;position:absolute;top:40px;left:390px;">Todos mis amigos</p>
<p style="border:1px solid black;width:599px;height:0px;position:absolute;top:60px;"></p>
<p id="caja amigo 1" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:110px;left:390px;"></p>
<p id="caja amigo 2" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:225px;left:390px;"></p>
<p id="caja amigo 3" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:340px;left:390px;"></p>
<p id="caja amigo 4" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:455px;left:390px;"></p>
<p id="caja amigo 5" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:570px;left:390px;"></p>
<p id="caja amigo 6" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:110px;left:690px;"></p>
<p id="caja amigo 7" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:225px;left:690px;"></p>
<p id="caja amigo 8" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:340px;left:690px;"></p>
<p id="caja amigo 9" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:455px;left:690px;"></p>
<p id="caja amigo 10" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:570px;left:690px;"></p>
<img src="friends_24.png" style="width:20px;height:20px;position:absolute;top:20px;left:385px;">
<img src="action.jpg" style="width:100px;height:100px;position:absolute;top:131px;left:391px;">
<p style="position:absolute;top:130px;left:500px;font-weight:bold;color:#1f63d1;">Action Bronson</p>
<p style="position:absolute;top:150px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">3517 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:180px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:202px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:199px;left:566px;width:15px;height:15px;">
<img src="dave.jpg" style="width:100px;height:100px;position:absolute;top:246px;left:391px;">
<p style="position:absolute;top:245px;left:500px;font-weight:bold;color:#1f63d1;">Dave Chappelle</p>
<p style="position:absolute;top:268px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">2985 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:295px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:315px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:315px;left:566px;width:15px;height:15px;">
<img src="edmund.jpg" style="width:100px;height:100px;position:absolute;top:361px;left:391px;">
<p style="position:absolute;top:360px;left:500px;font-weight:bold;color:#1f63d1;">Edmund McMillen</p>
<p style="position:absolute;top:380px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">6219 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:410px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:430px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:430px;left:566px;width:15px;height:15px;">
<img src="eugenia.png" style="width:100px;height:100px;position:absolute;top:476px;left:391px;">
<p style="position:absolute;top:480px;left:500px;font-weight:bold;color:#1f63d1;">Eugenia Cooney</p>
<p style="position:absolute;top:500px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">8123 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:525px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:545px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:545px;left:566px;width:15px;height:15px;">
<img src="kim.jpg" style="width:100px;height:100px;position:absolute;top:591px;left:391px;">
<p style="position:absolute;top:590px;left:500px;font-weight:bold;color:#1f63d1;">Kim Kardashian</p>
<p style="position:absolute;top:610px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">11799 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:640px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:660px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:660px;left:566px;width:15px;height:15px;">
<img src="kimjong.jpg" style="width:100px;height:100px;position:absolute;top:131px;left:691px;">
<p style="position:absolute;top:130px;left:800px;font-weight:bold;color:#1f63d1;">Kim Jong-un</p>
<p style="position:absolute;top:150px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">???? amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:180px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:202px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:199px;left:866px;width:15px;height:15px;">
<img src="rhettlink.png" style="width:100px;height:100px;position:absolute;top:246px;left:691px;">
<p style="position:absolute;top:245px;left:800px;font-weight:bold;color:#1f63d1;">Rhett and Link</p>
<p style="position:absolute;top:268px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">7007 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:295px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:315px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:315px;left:866px;width:15px;height:15px;">
<img src="satchel.jpg" style="width:100px;height:100px;position:absolute;top:361px;left:691px;">
<p style="position:absolute;top:360px;left:800px;font-weight:bold;color:#1f63d1;">Russ Parrish</p>
<p style="position:absolute;top:380px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">3015 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:410px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:430px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:430px;left:866px;width:15px;height:15px;">
<img src="snoop.jpg" style="width:100px;height:100px;position:absolute;top:476px;left:691px;">
<p style="position:absolute;top:480px;left:800px;font-weight:bold;color:#1f63d1;">Snoop Dogg</p>
<p style="position:absolute;top:500px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">5289 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:525px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:545px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:545px;left:866px;width:15px;height:15px;">
<img src="trump.jpg" style="width:100px;height:100px;position:absolute;top:591px;left:691px;">
<p style="position:absolute;top:590px;left:800px;font-weight:bold;color:#1f63d1;">Donald Trump</p>
<p style="position:absolute;top:610px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">599 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:640px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:660px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:660px;left:866px;width:15px;height:15px;">
</div>
</body>
</html>
答案 0 :(得分：1)
是的，position:absolute;弄乱了您的HTML文件。
以下是一些修复它并将更多结构带入文件的提示：
提供所有元素类。看起来相同的元素应该具有相同的类。然后将内联样式移动到样式表。
重命名HTML元素。 <p>代表“段落”，因此只应用于分割较长的文本。使用<div>表示简单的块。
删除position:absolute;的所有出现。 将所有元素移动到正确的容器中。（位于另一个元素前面的元素 in
布置元素相对于其父。
以下是如何布局网格的一个非常简单的示例：
/* Stylesheet */
.container {
width: 500px;
margin: 20px auto;
border: 1px solid gray;
padding: 10px 0 10px 10px; /* spacing */
}
.profile {
display: inline-block; /* this lets the boxes float like words in a text */
border: 1px solid gray;
width: 222px;
min-height: 50px;
margin: 10px; /* spacing */
}<div class="container">
<div class="profile">Box 1</div>
<div class="profile">Box 2</div>
<div class="profile">Box 3</div>
<div class="profile">Box 4</div>
<div class="profile">Box 5</div>
<div class="profile">Box 6</div>
<div class="profile">Box 7</div>
</div>
答案 1 :(得分：0)
如果您希望设计保持良好而不破坏，则应考虑使用响应式网页设计。有一些关于这个主题的好书，如ETHAN MARCOTTE的响应式网页设计。这将解决您的问题。
其次，为了您自己的利益，您应该删除那些内联样式，因为
我的建议是考虑在外部文件中添加这些css。