如何解决不能在网格元素内浮动两个项目
我有一个包含一堆项目的网格。其中一项包含图像和一些文本。我想在图像旁边浮动文本,但无法让它工作...
见下面的代码:
<div id="blog-post-item" class="blog-post">
<h1>Some amazing blogpost title about something super cool!</h1>
<div class="blog-post-content">
<div class="content-flex-container clearfix">
<img src="Data/Content/food_post5.jpg">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione,repellendus natus! Corporis,architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.</p>
</div>
</div>
</div>
body {
display: grid;
background: tomato;
grid-template-columns: repeat(3,1fr);
grid-template-rows: minmax(max-content,max-content);
column-gap: 20px;
row-gap: 20px;
}
.blog-post {
background: #fff;
border: 5px solid #fff;
border-radius: 10px;
display: grid;
grid-template-rows: minmax(auto,max-content) 1fr;
height: 100%;
grid-column: 2/-1;
width: 100%;
}
.blog-post h1 {
grid-row: 1;
grid-column: 1/-1;
}
.blog-post-content {
grid-row: 2;
}
.content-flex-container {
height: 100%;
width: 100%;
display: block;
}
.content-flex-container img {
height: 100%;
float: left;
}
.content-flex-container p {
float: left;
}
正如您所看到的,文本位于图像下方,而不是在白色大空间中图像的右侧..
如果需要更多信息,请告诉我,以便我澄清。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。