我怎样才能获得附图中显示的布局？

Question

我对HTML / CSS比较陌生，我正在努力弄清楚如何最好地实现类似这样的布局：

布局将显示用户关注和关注的人数（这些将是链接）。第一和第二统计数据之后是右边距（以帮助划分内容）

任何提示？！

Answer 1

一个非常简单的哈希

http://jsfiddle.net/H5BVs/

Shoudl指出你正确的方向：）

Answer 2

在这里您可以查看一个工作示例：http://jsfiddle.net/2LxxT/

HTML

<ul>
    <li>
        <span>3</span>
        followers
    </li>
    <li class="padded">
        <span>6</span>
        following
    </li>
    <li>
        <span>2</span>
        props
    </li>
</ul>

CSS

ul
{ font-family: arial; }

/* LI's have a default display of block, setting a float will display them on the same line, alternatively display:inline-block; would do the same */
    ul li
    {float:left;height:60px; font-size: 12px; color: #A19AA2; }

/* Target the very first list element */
    ul li:first-child
    { padding-right: 20px; }

/* Target the very last list element */
    ul li:last-child
    { padding-left: 20px; }

/* Add padding to your middle element */
    ul li.padded
    { border-left: 1px solid #E8E8E8; border-right: 1px solid #E8E8E8; padding:0 20px; }

/* Change your span from an inline element to a block element */
    ul li span
    { display: block; font-size: 20px; color: #434343; font-weight: bold; margin-top: 12px;}

Answer 3

这应该让你入门

<强> HTML

<div id="followers"><span>3</span>followers</div>
<div id="following"><span>3</span>following</div>
<div id="props"><span>2</span>props</div>

<强> CSS

#followers, #following, #props{
    display:inline-block;
    height:50px;
    width:100px;
    border-right:1px solid #c2c2c2;
    text-align:center;
}

#props{
    border:none;
}

#followers span, #following span, #props span{
    font-size:1.8em;
    display:block;
}

示例： http://jsfiddle.net/PxDMa/