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

问题在于您正在嵌套元素：
something something
将 与结束分开，所有内容都排成一行：
https://jsfiddle.net/jalbertbowdenii/5axLw1ww/

Answer 2

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

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

我尝试了这个，效果很好。

Answer 3

首先，您有两个打开的<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'self' 'unsafe-inline' 'unsafe-eval'; script-src * 'self' 'unsafe-inline' 'unsafe-eval';">代码，只有一个结束代码。请妥善解决这一点。
问题是因为你在里面浮动的元素李。您需要使用clear:both。
请找到clear float elements inside li

**

li

#work li {
   list-style-type: none !important;
   clear:both;
   
}

#work li img {
    float: left;
}

#work li p {
    float: right;
}

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

并排排列图像和文本

4 个答案: