1

我有 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/ - 它应该被修复（我希望有人明白我想做什么）

4

2 回答 2

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

这是小提琴

于 2013-01-21T21:12:27.427 回答
0

好吧，对于 INLINE 元素，只需删除 'float:left' .. 自然内联流将适用，然后，您的文本将正常通过。

好的，现在我接受了你的任务（我希望）

只需让您的容器行为有一个块，将其向左浮动并添加溢出：隐藏；

http://jsfiddle.net/NgfSF/

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

.description1 {
display: block;
overflow: hidden;
}
于 2013-01-21T21:25:39.673 回答