并排对齐图像和文本

Question

我有一个包含三个服务项目的列表，其中包含一个图像（旨在向左浮动）和一小段文本（旨在向右浮动）。我已经有了我认为合适的代码，但它不能正常工作，我不知道问题出在哪里。

<ul id="work">
<li><img src="http://placehold.it/350x150" /><p>SERVICE 1<br/><p>Service 1 description.</p></li>
<li><img src="http://placehold.it/350x150" /><p>SERVICE 2<br/><p>Service 2 description.</p></li>
<li><img src="http://placehold.it/350x150" /><p>SERVICE 3<br/><p>Service 3 description.</p></li>

#work li {
   list-style-type: none !important;
}

#work li img {
    float: left;
}

#work li p {
    float: right;
}

https://jsfiddle.net/feewvmvt/

Answer 1

将您的 float: left 和 float: right 更改为 display: inline-block;

问题是浮动元素不占用其父元素的宽度和高度。使用 inline-block，父元素将扩展以适应其子元素，并将其他元素向下推以腾出空间。

我试过了，效果很好。

Answer 2

问题是您嵌套了  个元素：
something something
将   替换为结束符 ，一切都排成一行：
https://jsfiddle.net/jalbertbowdenii/5axLw1ww/

Answer 3

首先，您有两个打开的  标签和一个关闭的  标签。请修复那。
这个问题是因为你在里面漂浮的元素李。您需要使用 clear:both 到 li.
请寻找其他方式clear float elements inside li

**

#work li {
   list-style-type: none !important;
   clear:both;
   
}

#work li img {
    float: left;
}

#work li p {
    float: right;
}

<ul id="work">
 <li><img src="http://placehold.it/350x150" /><p>SERVICE 1<br/>Service 1 description.</p></li>
 <li><img src="http://placehold.it/350x150" /><p>Service 2<br/>Service 2 description.</p></li>
 <li><img src="http://placehold.it/350x150" /><p>SERVICE 3<br/>Service 3 description.</p></li>
</ul>

Answer 4

我认为您应该将文本包装在 div 上，这样您可以更轻松地操作它。我将两个块都向左浮动，它们对齐得很好。此外，如果您清除浮动，<li> 标签会恢复它的高度

你可以尝试这样的事情。这是 fiddle

HTML

<ul id="work">
  <li>
    <img src="http://placehold.it/350x150" />
    <div class="caption">
      <p>SERVICE 1</p>
      <p>Service 1 description.</p>
    </div>
    <div class="clear">
    </div>
  </li>
  <li>
    <img src="http://placehold.it/350x150" />
    <div class="caption">
      <p>SERVICE 1</p>
      <p>Service 1 description.</p>
    </div>
    <div class="clear">
    </div>
  </li>
  <li>
    <img src="http://placehold.it/350x150" />
    <div class="caption">
      <p>SERVICE 1</p>
      <p>Service 1 description.</p>
    </div>
    <div class="clear">
    </div>
  </li>
</ul>

和CSS

#work li {
  list-style-type: none !important;
  margin-bottom: 10px;
}

#work li img {
  float: left;
}

.caption {
  float: left;
  padding-left: 5px;
}

并排对齐图像和文本

aligning images and text side by side

html

css

css-float