我正在尝试使用HTML设计用户配置文件页面布局,我已经尝试了几次,看看它是我想要的但是我失败了.
这是一个链接,您可以在其中了解我希望它看起来如何 - http://i56.tinypic.com/jjydkg.jpg
请你帮我这个吗？提前致谢
假设外部矩形是<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>