Question

我旁边有一张图片和一些文字。当文本太长时，所有文本都会在图像下移动。如何使文本始终在图像右侧的右侧对齐，无论文本的长度如何。并且文本总是整齐地边缘排列（=不是最后一行在图像下移动。这可能实现吗？

附上小提琴... Fiddle

这是我的代码：

 <div class="car">
      <div class="image">
          <img alt="" src="http://placehold.it/50x50&text=CAR" />
      </div>
      <div class="makeAndModel">
            <div class="brand">
                Mercedes
            </div>          
            <div class="model">
                W126000000000000000000000000000000000000000000000000000000000000000000000000
            </div>
     </div>
</div>

CSS：

.car {
    display:block;
}

.car .image {    
    margin:0;
    display:inline-block;
    vertical-align:middle;
}
.car .image img {
    max-width:100%;
    max-height:100%;
}

.car .makeAndModel {
    margin:0 0 0 5px;
    font-family:'Droid Serif';
    display:inline-block;
    vertical-align:middle;
}

.brand {
    font-size:16px;
    color:#333333;
    font-weight:bold;
    display:block;
}

.model {
    font-size:12px;
    color:#5A5A5A;
    font-style:normal;
    display:block;
}

Desired output

Answer 1

添加此样式：

C:\Ruby193>ruby TestMultipart.rb
TestMultipart.rb:10:in `block in <main>': undefined method `verify_mode=' for #<Net::HTTP::Post::Multipart POST> (NoMethodError)
        from TestMultipart.rb:4:in `open'
        from TestMultipart.rb:4:in `<main>'

您还可以从.car { white-space: nowrap; }课程中删除display: block;，因为car默认为该样式。

Fiddle

Answer 2

在课程.car

中添加white-space:no-wrap;

.car {
    display:block;
     white-space: nowrap;
}

演示：FIDDLE

<强>更新

根据你的图像，设置div的宽度，包括图像和文本。

更新 - 1

我想我找到了一个解决方案，

这是我的JSFIDDLE-UPDATE

你必须使用word-wrap: break-word;

Answer 3

使用表格单元格可以将容器分成如下列：

.car {
    display:table;
}

.car .image {    
    margin:0;
    display: table-cell;
    vertical-align:middle;
}
.car .image img {
    max-width:100%;
    max-height:100%;
    min-width: 50px;
    height: auto;
}

.car .makeAndModel {
    margin:0 0 0 5px;
    font-family:'Droid Serif';
    display:table-cell;
    vertical-align:middle;
}

.brand {
    font-size:16px;
    color:#333333;
    font-weight:bold;
    display:block;
}

.model {
    font-size:12px;
    color:#5A5A5A;
    font-style:normal;
    display:block;
}

http://jsfiddle.net/1mb2Lvc4/1/

Answer 4

只有在特定长度

之后才能使用“......”

.model{width: 420px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

没有其他事情可以做

文本始终与图像的右侧对齐，并且左侧具有相同的边距

4 个答案: