3

これは、私が CSS で達成しようとしていることの視覚的な例です。

ここに画像の説明を入力

http://jsfiddle.net/En4yC/3/にも実例があります

問題は、テキストをアイコンの横に配置する必要がありますが、コンテナの列が流動的であるため、厳密な幅を与えないことです。これは可能だと思いますか？たぶん、いくつかの負のマージンがフローティングで機能するでしょうか?

//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>
4

6 に答える 6

11

これを CSS に追加します。

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

このようにして、画像がある場合はテキストが画像の横に表示され、画像がない場合はコンテナーの左の境界線に貼り付けられます。br タグを削除して、それらがなくても機能することを示しました。

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

于 2013-04-02T14:28:30.437 に答える
1

ほら…

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;
}

それが役に立てば幸い。

于 2013-04-02T14:35:06.843 に答える
0

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;
}
于 2013-04-02T14:31:52.267 に答える