html - 如何在图像旁边对齐标题和副标题?
问题描述
我正在尝试编写博客以获取 php 和 html 的经验。我有一个网站,我在其中列出了一个特殊类别的所有帖子,它们的数量可能会有所不同。
有一个标题,一个副标题和一个 div “fakeimg”(用作我还没有得到的图片的占位符),我希望副标题位于标题下方,而 fakeimg 位于它们旁边,顶部它的一侧应该与标题的高度相同。
_________
title, mostly a short one | |
| fakeimg |
the subheading, one row or | |
maybe two |_________|
________a hr between the posts_________
_________
title, mostly a short one | |
| fakeimg |
the subheading, one row or | |
maybe two |_________|
我已经尝试了很多我在互联网上找到的东西来让它们像我想要的那样对齐,但不知何故我没有设法让它与任何一个显示器一起工作:例如 flex 或 block
这是 fakeimg 的 css,应该包含标题、副标题和 fakeimg 的 div 以及仅用于标题和仅副标题的 div。
.fakeimg {
width: 100px 100px;
padding: 3em 2em;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-right: 0.5em;
background-color: lightgrey;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
float: right;
display: block;
}
.title-and-subheading-onecat{
margin-right: 1.5em;
display: flex;
align-items: start;
}
.one-post {
clear: both;
margin: 0;
}
.post-description {
margin-bottom: auto;
}
这里也是页面本身的代码
<?php foreach($post as $p):?>
<div class="title-and-subheading-onecat">
<div class="one-post">
<a href="http://localhost:8888/blog/public/index.php/post?id=<?php echo e($p->id); ?>">
<?php echo (e($p['title'])); ?>
</a>
<br />
</div>
<div class="post-description">
<?php echo nl2br(e($p['subheading']));?>
</div>
<div class="fakeimg">
Image
</div>
</div>
<?php endforeach;?>
随着编辑 fakeimg 从标题的相同高度开始,这就是我想要的。还有一个问题是 fakeimg 应该都在正确的站点上并且具有相同的水平位置,现在它直接在副标题旁边。
我很感激我得到的任何帮助,因为我是新手。
解决方案
您必须使用单独的 div。一个用于标题和副标题,另一个用于图像。然后以某种方式指定两者的宽度,以便它们加起来为 100%。将它们都向左浮动,使它们彼此相邻。我已经调整了你的代码。
CSS
.img-parent {
width: 50%;
float: left;
}
.fakeimg {
width: 100px 100px;
padding: 3em 2em;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-right: 0.5em;
background-color: lightgrey;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: relative;
display: block;
}
.title-and-subheading-onecat{
margin-right: 1.5em;
display: block;
align-items: start;
}
.one-post {
width: 50%;
float:left;
}
.post-description {
float: left;
margin-bottom: auto;
}
HTML:
<div class="title-and-subheading-onecat">
<div class="one-post">
<div class="title">
<a href="http://localhost:8888/blog/public/index.php/post?id=1">
asdasd asd asd asd asd asd asd
</a>
</div>
<div class="post-description">
asdasdasd asd asd ad as dasd asdas das asd asdas dasd asd asda das dasd asds
</div>
</div>
<div class="img-parent">
<div class="fakeimg">
Image
</div>
</div>
</div>
推荐阅读
- python - 请求基本页面时出现意外错误
- excel - 将上次发送的电子邮件从 Outlook 2016 复制到内存
- android - 按 ServerTimestamp 和 FirebaseUI Firestore 分页的 Firebase Firestore 排序集合
- authentication - 适当的服务间授权
- vue.js - 如何使用不记名令牌通过 api 流式传输视频下载?- Laravel、Vue.js、HTML5
- r - 如何将行附加为数据框 R 的新列
- sql - 如何使用sql查询以相反的顺序显示数据?
- javascript - 将数据从函数传递到日期函数(让 date = new Date ("Values"))
- arrays - 朱莉娅:我如何将一个字符串切割成一个数组{String}?
- python - 如何将混合类型数据读取到二维数组?