为什么文本在 float: left 块后被下推？

Question

我有一个图像结构，它向左浮动，另一个块应该水平跟随它向右移动。确实如此，除非该块的文本长度变大。然后东西就乱了。

这是我的结构：

post-big-then-small-2-smaller {
  height: 100%;
  overflow: hidden;
  width: 100%;
  margin-top: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
}
    
.post-big-then-small-2-smaller .post-thumbnail img {
  height: 90px;
  width: 40%;
  object-fit: cover;
  position: relative;
  float: left;
  margin-right: 10px;
}
    
    .post-big-then-small-2-smaller .entry-header .entry-title {
  margin: 0 0 6px 0;
}

.post-big-then-small-2-smaller .entry-header .entry-title a {
  white-space: nowrap;
  color: #1e1e1e;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
}
    
.post-big-then-small-2-smaller .entry-header .entry-meta .entry-date-published {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 10px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  color: #3a3a3a;
  opacity: 0.5;
}

<article class="post-big-then-small-2-smaller">
      <div class="post-thumbnail">
          <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/>
      </div>
      <header class="entry-header">
          <div class="entry-meta">
              <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3>
              <a href="http://www.google.com" rel="bookmark">
                  <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time>
              </a>
      </header>
  </article>

我遇到的情况：

关于原因有什么想法吗？

Answer 1

避免将 CSS 样式应用于 child 元素，而是将 CSS 样式应用于 .post-thumbnail 和 .entry-header。还要从标题中删除 white-space: nowrap（它没有用）。

In your case apply CSS properties (float, height, etc.) to .post-thumbnail instead of .post-thumbnail img

示例：

.post-big-then-small-2-smaller .post-thumbnail {
  width: 40%;
  float: left;
  margin-right: 10px;
}

看看下面的片段：

.post-big-then-small-2-smaller {
    height: 100%;
    overflow: hidden;
    width: 100%;
    margin-top: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e5e5;
}

.post-big-then-small-2-smaller .post-thumbnail {
  width: 40%;
  float: left;
  margin-right: 10px;
}

.post-big-then-small-2-smaller .post-thumbnail img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    position: relative;
}

.post-big-then-small-2-smaller .entry-header .entry-title {
    margin: 0 0 6px 0;
}
.post-big-then-small-2-smaller .entry-header .entry-title a {
    color: #1e1e1e;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
}

.post-big-then-small-2-smaller .entry-header .entry-meta .entry-date-published {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 10px;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    color: #3a3a3a;
    opacity: 0.5;
}

<article class="post-big-then-small-2-smaller">
      <div class="post-thumbnail">
          <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/>
      </div>
      <header class="entry-header">
          <div class="entry-meta">
              <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus Finmus Maximus</a></h3>
              <a href="http://www.google.com" rel="bookmark">
                  <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time>
              </a>
      </header>
  </article>

希望对您有所帮助！

Answer 2

display property 指定用于 HTML 元素的框类型。对于您的情况，您可以使用 display:inline-block :

 .post-thumbnail {
width: 50%;
display: inline-block;
float: left;
}
 header.entry-header {
width: 50%;
float: right;
text-align: left;
}

Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

然后设置要浮动的内部元素的位置:

post-big-then-small-2-smaller {
        height: 100%;
        overflow: hidden;
        width: 100%;
        margin-top: 24px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e5e5;
    }
    
.post-big-then-small-2-smaller .post-thumbnail img {
    height: 90px;
    width: 40%;
    object-fit: cover;
    float: right;
    position: relative;
    margin-right: 10px;
}
    
    .post-big-then-small-2-smaller .entry-header .entry-title {
        margin: 0 0 6px 0;
    }
    .post-big-then-small-2-smaller .entry-header .entry-title a {
        white-space: nowrap;
        color: #1e1e1e;
        font-family: 'Playfair Display', serif;
        font-size: 20px;
    }
    
    .post-big-then-small-2-smaller .entry-header .entry-meta .entry-date-published {
        text-transform: uppercase;
        letter-spacing: 3px;
        font-size: 10px;
        font-family: Montserrat, sans-serif;
        font-weight: 600;
        color: #3a3a3a;
        opacity: 0.5;
    }
article.post-big-then-small-2-smaller {
    display: inline-block;
    max-width: fit-content;
    width: 100%;
    text-align: center;
}

.post-thumbnail {
    width: 50%;
    display: inline-block;
    float: left;
}
header.entry-header {
    width: 50%;
    float: right;
    text-align: left;
}
.text{width:100%;display:inline-block;max-width:75%;margin:auto}

<article class="post-big-then-small-2-smaller">
                    <div class="post-thumbnail">
                        <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/>
                    </div>
                    <header class="entry-header">
                        <div class="entry-meta">
                            <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3>
                            <a href="http://www.google.com" rel="bookmark">
                                <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time>
                            </a>
                </div>
</header>
<div class="text"><p>text text text texttext texttext texttext texttext texttext texttext texttext texttext text</p></div>
  </article>
<article class="post-big-then-small-2-smaller">
                    <div class="post-thumbnail">
                        <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/>
                    </div>
                    <header class="entry-header">
                        <div class="entry-meta">
                            <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3>
                            <a href="http://www.google.com" rel="bookmark">
                                <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time>
                            </a>
                </div>
</header>
<div class="text"><p>text text text texttext texttext texttext texttext texttext texttext texttext texttext text</p></div>
  </article>
<article class="post-big-then-small-2-smaller">
                    <div class="post-thumbnail">
                        <img class="img-responsive" alt="" src="https://www.marrakech-desert-trips.com/wp-content/uploads/2014/10/Morocco-sahara-desert-tour-Marrakech-to-Merzouga-3-days.jpg"/>
                    </div>
                    <header class="entry-header">
                        <div class="entry-meta">
                            <h3 class="entry-title"><a href="http://www.google.com" rel="bookmark">Finmus Maximus</a></h3>
                            <a href="http://www.google.com" rel="bookmark">
                                <time class="entry-date-published" datetime="2017-07-02T07:31:04+00:00">July 2, 2017</time>
                            </a>
                </div>
</header>
<div class="text"><p>text text text texttext texttext texttext texttext texttext texttext texttext texttext text</p></div>
  </article>

为什么文本在 float: left 块后被下推？

Why is text pushed down after a float: left block?

css

css-float