Question

以下是我尝试使用CSS实现的一个直观示例：

enter image description here

的实例

问题是我需要将文本对齐到图标旁边，但不要给它一个严格的宽度，因为容器列是液体。你认为这有可能吗？也许一些负利润可以用于浮动？

//CSS
.column {
    width:33.3333%;
}

.ico {
    display: inline-block;
    float:left;
    width: 32px;
    height: 32px;
    margin-top: 4px;
    margin-right:10px;
    line-height: 32px;
    background-image: url("http://fakeimg.pl/32x32/");
    background-position: 0 0;
    background-repeat: no-repeat;
}

//HTML
<div class="column"> 
    <span class="ico"></span>
    <span class="title">Curabitur pharetra<br/> nibh eget<br/> lorem<br/> egestas laoreet</span>
</div>

Answer 1

将此添加到您的CSS：

.title { display: block; overflow: hidden; }

这样，如果有图像，文本将在图像旁边，如果没有，它将粘在容器的左边框上。我删除了br标签，以表明它没有它们也能正常工作：

http://jsfiddle.net/En4yC/9/

Answer 2

使标题浮动在浮动图标旁边：

.title { float: left; }

演示：http://jsfiddle.net/Guffa/En4yC/4/

Answer 3

只要您的图标是静态尺寸，就可以使用边距：

http://jsfiddle.net/En4yC/7/

.title {
    margin-left: 42px; /* size of image + desired padding after image */
    display: block;
}

Answer 4

这就是......

<强> HTML

<div class="column"> 
    <div class="ico"></div>
    <span class="title">Curabitur pharetra<br/> nibh eget<br/> lorem<br/> egestas laoreet</span>
</div>

<强> CSS

.column
{
    width:33%;
}

.ico, 
.title
{
   display:inline-block;
   vertical-align:top;
}

.ico 
{
    width:32px;
    height:32px;
    background: url("http://fakeimg.pl/32x32/") no-repeat 0px 0px;  
    padding:5px;
}

希望它有所帮助。

Answer 5

HTML：

<div class="content">
<img src="img.jpg" width="30" height="30" />
<p>Curabitur pharetra nibh eget lorem egestas laoreet</p>
</div>

你的css：

.content {
padding: 0 0 0 50px;
position: relative; 
}

.content img {
left: 0;
position: absolute;
top: 0;
}

Answer 6

这是怎么回事？这显示了如何将图标或图像放在div中，并将其放在另一个带有文本内部的div旁边，这将确保文本一致地流动。

http://jsfiddle.net/En4yC/6/

<div class="icon">
    <img src="http://fakeimg.pl/32x32/" />
</div>
<div class="text">
    Curabitur pharetra nibh eget lorem egestas laoreet
</div>

.icon {
    float:left;
}

.text {
    float:left;
    padding: 0 10px;
    width: 100px;
}

如何避免文本在css下方的图标下方？

6 个答案: