为什么在float:left block之后文本被压低?
我有一个漂浮在左边的图像和另一个应该水平向右的图块。它的确如此,除非该块的文本长度变大。然后东西变得混乱。为什么在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>
我所经历:
任何想法,为什么?
避免将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>
希望这会有所帮助!
它有效,但我们在这里做了什么?我错过了什么?我觉得好像我之前已经解决了这个问题50次,但从未知道是什么原因造成的。 –
@DanielMoss您正在将CSS样式应用于'.post-thumbnail'中的图像,而'.entry-title'内部的标题不知道'img'左边是浮动的。因此,您应该将CSS属性分配给'.post-thumbnail'而不是'img',这样'.entry-title'应该知道在哪里环绕。我希望你明白吗?看我写的答案中的例子。 –
@Saurvan Rastogi太棒了,谢谢! –
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>
_“有关为什么?”的任何想法? - 因为你明确指出这应该发生...? '.post-big-then-small-2-smaller .entry-header .entry-title a { white-space:nowrap; ...' – CBroe