html - 帮助制定布局此页面部分的最佳方法？

Question

根据我附在这篇文章中的代码结构，我对可能布局设计的最佳方式一片空白，这可以使用 <dl> 实现吗？或 <ul>标签还是必须有 div 等？

感谢所有建议。

http://www.flickr.com/photos/62570778@N04/5719672246/in/photostream/

Answer 1

我可能会这样做:http://jsfiddle.net/Drnsk/

<ul class="userDetails">
    <li>
        <h4>My Vitals</h4>
        <div class="social">social</div>
    </li>
    <li>
        <h4>Where I'm From <span>USA</span></h4>
        <div class="map">map</div>
    </li>
    <li>
        <h4>My Name <span>John</span></h4>
    </li>
    <li>
        <h4>My Age <span>29</span></h4>
    </li>
</ul>

.userDetails {
    width: 440px;
    background: #fff;
    list-style: none;
    margin: 0;
    padding: 9px 9px 0 9px
}
.userDetails li {
    overflow: hidden;
    border-top: 1px solid #000;
    padding: 9px 0;
}
.userDetails li:first-child {
    padding-top: 0;
    border-top: 0
}
.userDetails h4 {
    font-weight: bold;
    font-size: 20px;
    margin: 0;
    padding: 0;
    position: relative
}
.userDetails h4 span {
    font-weight: normal;
    font-size: 20px;
    width: 120px;
    position: absolute;
    top: 0; right: 0
}


.userDetails .social, .userDetails .map {
    height: 40px;
    color: #fff;
    background: #f0f
}