如何正确在图像旁边制作文字 go
[英]how to make text go beside the image properly
问题描述
I'm fairly new to HTML and am trying to make a bread website, in the website I want to have a paragraph beside my image.
我对 HTML 还很陌生，并且正在尝试制作一个面包网站，在该网站中，我想在我的图像旁边放一个段落。 When attempting this I found that the paragraph get stuck to the right of the image.尝试此操作时，我发现该段落卡在图像的右侧。 My question is how would I make the text go to the other side of the image.我的问题是如何将文本 go 制作到图像的另一侧。 Here is my code and website.这是我的代码和网站。
<main>
<body>
<img src="https://onlycrumbsremain.com/wp-content/uploads/2020/10/dinner-roll-9.jpg" alt="10 kinds of bread" width="480" height="300" align="left" >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</body>
</main>
2 个解决方案
解决方案1
1 已采纳 2021-05-19 22:13:19
A quick mock up below.下面是一个快速的模拟。 Please note that I fixed your HTML where the <body> tag is the outer most tag.请注意，我修复了您的 HTML ，其中<body>标签是最外面的标签。 You will likely need another tag ( <section> or <article> ) and attach the CSS to a class.您可能需要另一个标签（ <section>或<article> ）并将 CSS 附加到 class。
main { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } img { max-width: 100%; height: auto; } p { margin-top: 0; }
<body> <main> <img src="https://onlycrumbsremain.com/wp-content/uploads/2020/10/dinner-roll-9.jpg" alt="10 kinds of bread" width="480" height="300" align="left" > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </main> </body>
解决方案2
1 2021-05-19 22:23:46
Use a combination of nested div tags with class links to css, as follows:使用嵌套的 div 标签与 class 链接到 css 的组合，如下所示：
<html>
<head>
<style>
.col {
float: left;
width: 50%;
}
</style>
</head>
<body>
<div >
<div class="col">
<img src="https://onlycrumbsremain.com/wp-content/uploads/2020/10/dinner-roll-9.jpg" alt="10 kinds of bread" width="480" height="300" align="left" >
</div>
<div class="col">
Lorem ipsum dolor sit amet...
</div>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.