我怎样才能获得如附图所示的布局？

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

此问题似乎偏离主题，因为缺乏足够的信息来诊断问题。更详细地描述您的问题或在问题本身中包含一个最小的示例。

10 年前已关闭。

Answer 1

一个非常简单的哈希

http://jsfiddle.net/H5BVs/

应该为您指明正确的方向： ）

Answer 2

这应该可以帮助您开始

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/

Answer 3

在这里您可以查看一个工作示例： 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;}