このページセクションをレイアウトする最善の方法を試すのに役立ちますか？

Question

私の考えは、この記事に添付されたコード構造の観点からデザインをレイアウトする最良の方法については空白です。これは<dl>タグまたは<ul>タグを使用して達成できますか、divなどが必要でしょうか？

すべての提案が高く評価されました。

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

Answer 1

私はこのようにそれを行う可能性があります：それは、私は間違いなく事実セクションの表を使用します（2つの列を占有）マップのためではなかった場合は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 
} 

Answer 2

私は960 Grid Systemをお勧めします、すべてをレイアウトするためにdivを使用しています。デザインをレイアウトするための非常に強力な開発ツールです。

Answer 3

divはタグです

これを実現する方法はたくさんあります。適切なタグ（ここではdiv）を作成してCSSでスタイルを設定する必要があります。

<div class="myvitals"> 
    vitals content here 
</div> 
<div class="where"> 
    where content here 
</div> 
<div class="name"> 
    name content here 
</div> 
<div class="age"> 
    age content here 
</div> 

その後、CSS：

.myvitals { 
    {your properties here} 
} 

and the definition of the other classes here. 

がそうでなければ、あなたがについて少し勉強する必要があり、これはいくつかの経験を持っている人のための基本であることを理解しますが、私はこれを示唆して始めるため

htmlとCSS。

Answer 4

。合理的な妥協点はおそらく、jackJoeが投稿したソリューションのdiv要素を使用することです。