我有一個漂浮在左邊的圖像和另一個應該水平向右的圖塊。它的確如此,除非該塊的文本長度變大。然後東西變得混亂。爲什麼在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>
我所經歷:
任何想法,爲什麼?
_「有關爲什麼?」的任何想法? - 因爲你明確指出這應該發生...? '.post-big-then-small-2-smaller .entry-header .entry-title a { white-space:nowrap; ...' – CBroe