如何正确排列图像和文字？

Question

我正在尝试将图像与某些文字对齐但我的问题是，如果文字太长，第二行会在图像下面，我希望它也与图像对齐。

这是我的代码：

echo '<li><div class = "imaj">
         <img style = "width:30px;height:35px;"src = "'.$row['image'].'">
      </div><div class = "titl">'.$row['title'].'</div>
      </li>';

这就是我想要的样子：

这就是现在的样子：

Answer 1

你去吧：

.imaj
{
    float: left;
}

.titl
{
  overflow: hidden;
}

小提琴：http://jsfiddle.net/zjtaLLu9/

Answer 2

我们还没有看到您的代码，但似乎您的图片中imaj div可能会向左浮动。

在这种情况下，您只需要将margin-left添加到titl div。

＆＃13;

＆＃13;

.imaj {
  float: left;
}
.titl {
  margin-left: 40px;
}

＆＃13;

<div class="wrap">
  <div class="imaj">
    <img src="http://lorempixel.com/output/abstract-q-c-35-35-7.jpg" alt="" />
  </div>

  <div class="titl">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi aliquid quibusdam quos facilis beatae quae architecto reiciendis quam magnam tempore sunt laboriosam repudiandae. Cupiditate eaque id ullam delectus sed mollitia commodi a consectetur
      doloremque ipsam. Dicta porro quisquam vitae labore amet quo ipsam quos exercitationem adipisci et dolorum aut necessitatibus! Lorem ipsum dolor sit amet..</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi aliquid quibusdam quos facilis beatae quae architecto reiciendis quam magnam tempore sunt laboriosam repudiandae. Cupiditate eaque id ullam delectus sed mollitia commodi a consectetur
      doloremque ipsam. Dicta porro quisquam vitae labore amet quo ipsam quos exercitationem adipisci et dolorum aut necessitatibus! Lorem ipsum dolor sit amet..</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

文本应该在div中，并给它一些余量

... <div id="titletext">'.$row['title'].' </div>

CSS：

#titletext{
  margin-left: 100px;
}