Question

我的图片旁边有漂浮的文字。它适用于大型桌面。但是当我减少设备尺寸时，文本不再垂直漂浮。基本上，文本在图像下方并占据整行。无论设备尺寸/图像高度如何，如何使文本始终向右浮动（垂直对齐）我有Bootstrap模板，因此响应能力是我网站的关键。我知道我可以让我的图像更大，但这不符合我网站的布局。

我的小提琴...... Fiddle

HTML：

/usr/local/lib/ruby/gems/2.0.0/gems/unicorn-4.9.0/lib/unicorn/configurator.rb:657:in `parse_rackup_file': rackup file (config.ru) not readable (ArgumentError)
        from /usr/local/lib/ruby/gems/2.0.0/gems/unicorn-4.9.0/lib/unicorn/configurator.rb:77:in `reload'
        from /usr/local/lib/ruby/gems/2.0.0/gems/unicorn-4.9.0/lib/unicorn/configurator.rb:68:in `initialize'
        from /usr/local/lib/ruby/gems/2.0.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:100:in `new'
        from /usr/local/lib/ruby/gems/2.0.0/gems/unicorn-4.9.0/lib/unicorn/http_server.rb:100:in `initialize'
        from /usr/local/lib/ruby/gems/2.0.0/gems/unicorn-4.9.0/bin/unicorn:126:in `new'
        from /usr/local/lib/ruby/gems/2.0.0/gems/unicorn-4.9.0/bin/unicorn:126:in `<top (required)>'
        from /home/sh0/app/current/api/bin/unicorn:16:in `load'
        from /home/sh0/app/current/api/bin/unicorn:16:in `<main>'

CSS：

  <div class="wrapper">
        <div class="img"><img alt="" src="http://placehold.it/150x150"></div>

        <div class="model">
            Mercedes
        </div>

        <div class="description">
            the best the best the best the best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the best bestthe best the best the bestthe best the best the bestthe best the best the bestbestthe best the best the bestthe best the best the bestthe best the best the best
        </div>
    </div>

Answer 1

你说你用过bootstrap。为什么不使用媒体对象而不是额外的CSS？

阅读本文以供参考：http://getbootstrap.com/components/#media

请参阅此片段。

foo = reverseArrayInPlace(foo);

Answer 2

更新fiddle

已移除display:inline-block，因为它不适用于float

添加了底部margin以推送文字

＆＃13;

.img {
  height: 75px;
  width: 75px;
  padding: 0 0 5px 45px;
  position: relative;
  word-wrap: break-word;
  float: left;
  margin: 0 0 35px 0;
}
.img img {
  max-width: 100%;
  max-height: 100%;
  left: 0;
  position: absolute;
  margin-top: 17px
}
.model {
  font-size: 12px;
  color: #5A5A5A;
  padding: 0 0 10px 55px;
  width: 100%
}
.description {
  font-size: 14px;
  margin-top: 10px;
  font-weight: 400
}

＆＃13;

<div class="wrapper">
  <div class="img">
    <img alt="" src="http://placehold.it/150x150">
  </div>

  <div class="model">
    Mercedes
  </div>

  <div class="description">
    the best the best the best the best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the best bestthe best the
    best the bestthe best the best the bestthe best the best the bestbestthe best the best the bestthe best the best the bestthe best the best the best
  </div>
</div>

＆＃13;

Answer 3

在这种情况下，请使用<table>。这使它变得干净整洁。 Stucture：

<table>
    <thead>
        <tr align="middle">
            <td colspan="2">Title</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td valign="top">
                <img src="#">
            </td>
            <td valign="top">
                text
            </td>
        </tr>
    </tbody>
</table>

两列，因此colspan必须为2才能跨越表格的整个宽度并使文本align="middle"居中。并且 valign 表示垂直对齐，因此img和文本始终位于顶部。

Demo

即使文本低于图像，也能正确浮动文本

3 个答案: