为什么文本在浮动后被按下：左块？

时间：2017-10-21 06:13:44

标签： css css-float

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

这是我的结构：

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>

我的体验：

enter image description here

关于为什么的任何想法？

2 个答案:

答案 0 :(得分：1)

避免将CSS样式应用于子元素，而是将CSS样式应用于.post-thumbnail＆amp; .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;
}

请看下面的代码段：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

答案 1 :(得分：0)

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;
}
  

将元素显示为内联级块容器。该块的内部格式为块级框，元素本身被格式化为内联级框

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

＆＃13;
＆＃13; 
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}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题