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スタイルを子要素に適用しないで、代わりにCSSスタイルを.post-thumbnail & .entry-headerに適用します。また、タイトルからwhite-space: nowrapを削除してください（使用していません）。あなたのケースでは

は .post-thumbnail代わり

.post-thumbnail imgの例にCSSプロパティ（フロート、高さなど）を適用します。

.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要素に使用されるボックスのタイプを指定します。 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>

：このブロックの内部には、ブロックレベルボックスとしてフォーマットされ、要素自体はインラインレベルボックス

としてフォーマットされ、その後、あなたがフロートしたい場所の内部要素を設定します