2017-10-21 77 views
0

我有一個漂浮在左邊的圖像和另一個應該水平向右的圖塊。它的確如此,除非該塊的文本長度變大。然後東西變得混亂。爲什麼在float:left block之後文本被壓低?

這裏是我的結構:

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

任何想法,爲什麼?

+0

_「有關爲什麼?」的任何想法? - 因爲你明確指出這應該發生...? '.post-big-then-small-2-smaller .entry-header .entry-title a { white-space:nowrap; ...' – CBroe

回答

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>

希望這會有所幫助!

+0

它有效,但我們在這裏做了什麼?我錯過了什麼?我覺得好像我之前已經解決了這個問題50次,但從未知道是什麼原因造成的。 –

+0

@DanielMoss您正在將CSS樣式應用於'.post-thumbnail'中的圖像,而'.entry-title'內部的標題不知道'img'左邊是浮動的。因此,您應該將CSS屬性分配給'.post-thumbnail'而不是'img',這樣'.entry-title'應該知道在哪裏環繞。我希望你明白嗎?看我寫的答案中的例子。 –

+0

@Saurvan Rastogi太棒了,謝謝! –

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

顯示元素作爲一個行內塊容器。該模塊的內部被格式化爲塊級框,在裏面元素要浮動元素本身被格式化爲一個行內框

然後設置:

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>

相關問題