Question

我似乎无法向左移动我的图像？无法弄清楚原因？

我已经申请了一个包含align-left的{{1}}课程。

现场版 - https://www.workbooks.com/salesforce-alternative（请参阅标题下方的评论网格＆＃39;高客户满意度评分＆＃39;）。

代码：

float: left

CSS：

<section class="bluesection card__content__headings">
    <img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" height="395" src="/sites/default/files/2017-03/Reviews-6.png" width="400" />
    <h2 style="height: 400px;"></h2>
    <p></p>
</section>

Answer 1

试试这段代码：

<section class="bluesection card__content__headings">
    <h2 class="heading--two inline-block__heading" style="margin: 0px 0px 20px; text-align:center;">High customer satisfaction ratings</h2>
    <img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" src="/sites/default/files/2017-03/Reviews-6.png" width="400" height="395">

    <p class="inline-block__copy">With our world class software, our CRM expertise and proven implementation best practices, we are a genuine partner you can rely on to accompany you on your CRM journey - helping you transform your business and drive ongoing success.</p>

    <p class="inline-block__copy">But don't just take our word for it. Over 268 independent customers have reviewed Workbooks on G2 Crowd where Workbooks consistently scores above Salesforce in satisfaction and richness of functionality.</p>

    <p class="inline-block__copy">The G2 Crowd Report compare Workbooks to its competitors based on independent user reviews. Workbooks is rated higher than Salesforce in most categories.</p>
    <p style="clear:both;"></p>
</section>

正如您所看到的，我在img之后更改了h2，并在p内部添加了clear:both section样式}。此外，我添加并删除了一些CSS样式以获得漂亮的外观。

Answer 2

不是float-left而是float: left;。这不是唯一的问题。

图像已经向左浮动但是它不能按照您希望的方式工作的原因是因为蓝色部分的填充。

请记住，图像相对于其所包含的元素向左浮动。如果将填充值更改为padding: 20px 50px 20px 50px;，则可以看到图像将向左移动，因为填充比最初的要小。

Answer 3

我明白了。

图像浮动到左侧，文本没有包裹的原因是内联高度：400px应用于标题而不是部分。

萨姆

Answer 4

它已经向左浮动了，之所以无法继续下去是因为它到达了div的边缘。 padding会缩小相对于子元素的边缘，但会保持定义的大小，除非值更大。

这是推荐的修复： HTML

<section class="bluesection card__content__headings">
  <img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" height="395" src="/sites/default/files/2017-03/Reviews-6.png" width="400" />
  <div class="text">
    <h2></h2>
    <p></p>
  </div>
</section>

CSS

.bluesection {
  position: relative;
  width: 100%;
  display: flex;
}

.text {
  width: 100%;
}

jsfiddle中的示例：https://jsfiddle.net/qf6w18p1/

Answer 5

我明白了。

图像浮动到左侧，文本未换行的原因是由于内联高度：400px应用于标题而不是部分。

您可以修正高度，但是当您在手机设备（360px x 640px）中看到代码时，标题h2将位于img下，并且看起来不太好。

我的建议是更改h2和img标记的代码。

漂浮离开不适用？

5 个答案: