Question

我有2个内联块的问题。我想创建这样的东西：

<img>  
<span>some long text next to the img</span>

我有以下结构（我必须使用）：

<div class="mainContainer">
    <div class="additional">
        <div class="description">
              <img></img>
        </div>
        <div class="description">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit...         
        </div>    
    </div>  
</div>

样式：

.mainContainer {
    height: 15px; } //doesn't matter in this case

.additional {   
    line-height: 15px; } //doesn't matter in this case

.description {
     float: left;
     display: inline; 
}

问题是当我想要添加长文本时，图像在文本上方，但它应该在它旁边。

它应该是这样的（我添加代码但必须删除）：

http://jsfiddle.net/476fm/

有什么建议吗？

编辑：好吧，实际上上面的文字只是示例，更具体的是我想要达到的目标：我有一个主容器，其中包含2个内联元素： - 第一个元素有图像
- 第二个也有图像和文本我想做的是：当文本很长并且需要在第二行时它不应该在第一个图像下面

http://jsfiddle.net/z2t7b/ - 应该修复（我希望有人理解我想做的事）

Answer 1

这是你想要完成的吗？

<div class="mainContainer">
    <div class="additional">
        <div class="description">
            <img></img> <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</br> sed do eiusmod tempor incididunt ut labore</div>
            <div class="breaker"></div>
            <img></img><div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</br> sed do eiusmod tempor incididunt ut labore</div>
        </div>

    </div>  
</div>

.mainContainer {
    height: 23px;
}

.additional{
    line-height: 23px;
}

.description {
    float:left;
    display: inline;
}

.breaker {clear: both;}

img {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
    float:left;
}

Here is the fiddle

Answer 2

好吧，对于INLINE元素，只需删除'float：left'..自然内联流将适用，那么，您的文本将正常传递。

好的，现在我开始接受你的任务（我喜欢）

只是让你的容器行为有一个块，向左浮动并添加overflow：hidden;

http://jsfiddle.net/NgfSF/

.description {
padding-right:10px;
float:left;
display: inline;
}

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

两个内联块：将文本放在图像旁边

2 个答案: