为什么在float：left block之后文本被压低？

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样式应用于子元素，而是将CSS样式应用于.post-thumbnail & .entry-header。从标题中删除white-space: nowrap（它没有用处）。

在您的案件，不适用的CSS属性（浮动，高度等）的.post-thumbnail代替.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; 
} 

显示元素作为一个行内块容器。该模块的内部被格式化为块级框，在里面元素要浮动元素本身被格式化为一个行内框

然后设置：

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>