Question

看一下这张图片：

http://i.gyazo.com/a5bf5097e6783d4879f12fdba0b2bbec.png

我想在Profile下面获得“Test”，BR html标签产生上述结果，我不希望这样。

这是我的代码： http://pastebin.com/raw.php?i=hW3jDrLu

<i class="fa fa-user fa-3x" style="vertical-align:middle;"></i>
<span style="font-size: 12pt;">Profile <span style="color: #979797;font-size:8pt;">Test</span></span>

我希望“测试”位于Profile标题

的正下方

Answer 1

如果没有看到更多代码，很难说，但我认为最好的办法是将img放在一个div中，将文本放在另一个div中。然后，您可以在div内的文本中换行，并且img的右侧仍然有<div class="imgC"><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42"> </img></div> <div class="textC"><span style="font-size: 12pt;">Profile <br></span><span style="color: #979797;font-size:8pt;">Test</span></div>。

Here模仿它应该如何运作。

显然我必须在这里添加小提琴代码：

HTML：

.imgC{
    display:inline-block;
    float:left;
}

.textC{
  display:inline-block;
    float:left;    
}

CSS：

{{1}}

Answer 2

您可能还想通过浮动它们并使用clear属性（fiddle here）来保留其块属性：

<强> HTML ：

<div id="Container">
    <img id="Icon" src="http://goo.gl/OJhO2s"/>
    <div id="InfoContainer">
        <span class="profile">Profile</span>
        <span class="test">Test</span>
    </div>
</div>

<强> CSS ：

#Icon {
    width: 64px;
    height: 64px;
    float: left;
}

#InfoContainer {
    float: left;
}

#InfoContainer span {
    display: block;
    clear: both;
}

.profile {
    font-size: medium;
}

.test {
    font-size: small;
    color: #444;
}

CSS对齐问题与图像

2 个答案: