如何使用 HTML 设计用户个人资料页面布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7357263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to design a user profile page layout with HTML?
提问by black_belt
I am trying to design a user profile page layout with HTML, I have tried several times to give it a look like how I want it to be but I failed.
我正在尝试使用 HTML 设计用户配置文件页面布局，我已经尝试过几次让它看起来像我想要的样子，但我失败了。
Here is the link where you can get an idea how I want it to be look like- http://i56.tinypic.com/jjydkg.jpg
这是您可以了解我希望它看起来如何的链接 - http://i56.tinypic.com/jjydkg.jpg
Would you please kindly help me with this? Thanks in Advance
你能帮我解决这个问题吗？提前致谢
回答by Joe
Assuming the outer rectangle is the <body>tag, this is a basic layout which you can modify easily enough.
假设外部矩形是<body>标签，这是一个基本布局，您可以轻松修改它。
<style type="text/css">
#ProfilePage
{
/* Move it off the top of the page, then centre it horizontally */
margin: 50px auto;
width: 635px;
/* For visibility. Delete me */
border: 1px solid red;
}
#LeftCol
{
/* Move it to the left */
float: left;
width: 200px;
text-align: center;
/* Move it away from the content */
margin-right: 20px;
/* For visibility. Delete me */
border: 1px solid brown;
}
#Photo
{
/* Width and height of photo container */
width: 200px;
height: 200px;
/* For visibility. Delete me */
border: 1px solid green;
}
#PhotoOptions
{
text-align: center;
width: 200px;
/* For visibility. Delete me */
border: 1px solid brown;
}
#Info
{
width: 400px;
text-align: center;
/* Move it to the right */
float: right;
/* For visibility. Delete me */
border: 1px solid blue;
}
#Info strong
{
/* Give it a width */
display: inline-block;
width: 100px;
/* For visibility. Delete me */
border: 1px solid orange;
}
#Info span
{
/* Give it a width */
display: inline-block;
width: 250px;
/* For visibility. Delete me */
border: 1px solid purple;
}
</style>
<div id="ProfilePage">
<div id="LeftCol">
<div id="Photo"></div>
<div id="ProfileOptions">
a
</div>
</div>
<div id="Info">
<p>
<strong>Name:</strong>
<span>Sirjon</span>
</p>
<p>
<strong>Name:</strong>
<span>Sirjon</span>
</p>
<p>
<strong>Name:</strong>
<span>Sirjon</span>
</p>
<p>
<strong>Name:</strong>
<span>Sirjon</span>
</p>
<p>
<strong>Name:</strong>
<span>Sirjon</span>
</p>
</div>
<!-- Needed because other elements inside ProfilePage have floats -->
<div style="clear:both"></div>
</div>
