PROSAGA码农传奇-Sahara云大数据-为什么文本在浮动后被按下：左块？

<div class =“post-text”itemprop =“text”>
  <P>
    该
    <a href="https://www.w3schools.com/cssref/pr_class_display.asp" rel="nofollow noreferrer">
      显示属性
    </A>
     指定用于HTML元素的框的类型。对于您的情况，您可以使用显示：
     <code>
      inline-block
    </code>
     ：
  </p>
   <pre>
    <code>
       .post-thumbnail {
width: 50%;
display: inline-block;
float: left;
}
 header.entry-header {
width: 50%;
float: right;
text-align: left;
}

</code>
  </pre>
  <BLOCKQUOTE>
    <P>
      将元素显示为内联级块容器。此块的内部被格式化为块级框，并且元素本身被格式化为内联级框
    </p>
  </BLOCKQUOTE>
  <P>
    然后你设置你想浮动的内部元素的位置：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          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}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>