所以我想做的是在图像的一侧添加一个段落,我已经制作好了:
但是有一段的另一行:
但不是像图片上显示的那样,而是像这样:
有人可以帮助我吗?
这是 HTML:
<center>
<h1 style="color:white;">
<img align="middle" src="OOOgamelibrary.png">Game Library</h1>
<p style="color:white;">PlaceHolder</p>
</center>
最佳答案
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 50px;
}
.container {
padding: 20px 40px 40px;
max-width: 640px;
display: flex;
}
.image {
margin: 20px 30px 0 0;
width: 200px;
object-fit: contain;
align-self: flex-start;
}
.text {
flex: 1 1 auto;
}
</style>
</head>
<body>
<div class="container">
<img class=" image" src="https://dummyimage.com/600x400/d941d9/fff.png&text=dummy+image">
<div class=" text">
<h2>Lorem Ipsum is simply dummy text of the printing</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
</div>
</body>
</html>
关于html - 如何在与图片对齐的同时制作带有段落的标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57571532/