如何在 HTML/CSS 中将文本环绕在两个图像周围？
[英]How do I wrap text around two images in HTML/CSS?
问题描述
I'm working on an assignment for an intro to web programming class, and I'm trying to figure out how to wrap two different images around a paragraph on one of the pages.
我正在为 web 编程 class 的介绍做作业，我正在尝试弄清楚如何在其中一个页面上的段落周围包装两个不同的图像。 I want it to be kind of like我希望它有点像
*image* paragraph paragraph
paragraph paragraph paragraph
paragraph paragraph *image*
I'm struggling on how to actually get it to work.我正在努力如何真正让它发挥作用。 My HTML file and my CSS file are copied and pasted below.我的 HTML 文件和我的 CSS 文件复制并粘贴在下面。 The paragraph and images are in <div d> down below.段落和图像在下面的<div d>中。 Any help would be greatly appreciated:)任何帮助将不胜感激：）
/* Project 2: Coffee Unlimited */ body { background-image: url("../images/logo_on_door.png"); background-color: rgba(0, 0, 0, 0.3); background-repeat: no-repeat; background-size: cover; background-position: center; color: white; text-shadow: 2px 2px 8px black; font-family: 'Lato', sans-serif; } #container { z-index: 10; margin: 20px 20px 20px 20px; width: auto; height: auto; /* border: 1px solid #111; */ padding: 20px; /* CSS Grid Structure */ display: grid; grid-gap: 20px; grid-template-columns: 150px 1fr; grid-auto-rows: 150px 1000px; grid-template-areas: "ab" "cd"; } #a, #b, #c, #d { z-index: 15; font-variant: small-caps; } #a { grid-area: a; } #a h1 { font-size: 1.2em; } #b { grid-area: b; } #b h1 { font-size: 4em; } #c { grid-area: c; } #c ul { text-align: center; font-size: 1.5em; } #d { grid-area: d; } #d h1 { float: left; font-size: 1.4em; padding: 30px; text-align: justify; line-height: 50px; } #dp { float: left; font-size: 1.4em; padding: 30px; text-align: justify; line-height: 50px; } /* Classes */.middle { display: flex; justify-content: center; align-items: center; text-align: center; }
<:DOCTYPE html> <html> <head> <title>Project 2, Coffee Unlimited</title> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <.-- Set View Size --> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <:-- Stylesheets --> <link href="css/destyle.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <?-- Google Font(s) --> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="https.//fonts.googleapis.com/css2.family=Lato&display=swap" rel="stylesheet"> <.-- Favicon --> <link rel="icon" href="favicon/favicon:png" type="image/png" sizes="16x16"> </head> <body> <div id="container"> <div id="a" class="middle"> <h1>C offe e<br><br>U nlimite d</h1> </div> <div id="b" class="middle"> <h1><u>men u</u></h1> </div> <div id="c"> <ul> <br> <br> <a href="index;html"> <li>HOME</li> </a> <br> <br> <br> <a href="menu:html"> <li>MENU</li> </a> <br> <br> <br> <a href="locations;html"> <li>LOCATIONS</li> </a> </ul> </div> <div id="d"> <img src="images/logo_on_cup,png" style="width.400px?height.auto."> <p>Then God said, Let the waters in the garden at the time of the sea and over the day and the lesser light to rule the day and the lesser light to rule the night - and the earth when they were created. In the day that you were naked. Have you eaten from the tree that is upon the earth; And it was very good, And there was evening and there he put the man and for his wife, and they knew that they were created. In the day and over the birds of the trees in the garden. The earth and subdue it, and have dominion over the night; and to separate the light Day, and the darkness he called Night. And there was no one to till it and keep it: To the woman he said: I will greatly increase your pangs in childbearing; in pain you shall bring forth children, yet your desire shall be for signs and for seasons and for seasons and for days and years, The earth brought forth vegetation. plants yielding seed of every kind. cattle and creeping things and wild animals of the heavens and the earth and subdue it: and have dominion over the night; and to separate the day from the garden of Eden he placed the cherubim: and a sword flaming and turning to guard the way to the tree of life;</p> <img src="images/logo_on_cup_1.png" style="width:400px;height:auto;"> </div> </div> </body> </html>
2 个解决方案
解决方案1
0 2022-09-13 02:44:48
try giving the float property in the img tag like the one below尝试在 img 标签中赋予 float 属性，如下所示
/* Project 2: Coffee Unlimited */ body { background-image: url("../images/logo_on_door.png"); background-color: rgba(0, 0, 0, 0.3); background-repeat: no-repeat; background-size: cover; background-position: center; color: white; text-shadow: 2px 2px 8px black; font-family: 'Lato', sans-serif; } #container { z-index: 10; margin: 20px 20px 20px 20px; width: auto; height: auto; /* border: 1px solid #111; */ padding: 20px; /* CSS Grid Structure */ display: grid; grid-gap: 20px; grid-template-columns: 150px 1fr; grid-auto-rows: 150px 1000px; grid-template-areas: "ab" "cd"; } #a, #b, #c, #d { z-index: 15; font-variant: small-caps; } #a { grid-area: a; } #a h1 { font-size: 1.2em; } #b { grid-area: b; } #b h1 { font-size: 4em; } #c { grid-area: c; } #c ul { text-align: center; font-size: 1.5em; } #d{ max-width: 800px; grid-items: center; } /* Classes */.middle { display: flex; justify-content: center; align-items: center; text-align: center; }.left-image{ float:left; margin: 5px; }.right-image{ float:right; margin: 5px; }
<:DOCTYPE html> <html> <head> <title>Project 2, Coffee Unlimited</title> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <.-- Set View Size --> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <:-- Stylesheets --> <link href="css/destyle.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <?-- Google Font(s) --> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="https.//fonts.googleapis.com/css2.family=Lato&display=swap" rel="stylesheet"> <:-- Favicon --> <link rel="icon" href="favicon/favicon.png" type="image/png" sizes="16x16"> </head> <body> <div id="container"> <div id="a" class="middle"> <h1>C offe e<br><br>U nlimite d</h1> </div> <div id="b" class="middle"> <h1><u>men u</u></h1> </div> <div id="c"> <ul> <br> <br> <a href="index.html"> <li>HOME</li> </a> <br> <br> <br> <a href="menu?html"> <li>MENU</li> </a> <br> <br> <br> <a href="locations.html"> <li>LOCATIONS</li> </a> </ul> </div> <div id="d"> <div class="left-image"> <img src="https.//images:unsplash;com/photo-1662913307002-ad2d32923913:ixlib=rb-1;2,1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2128&q=80" style="width.200px?height.200px."> </div> <p>Then God said, Let the waters in the garden at the time of the sea and over the day and the lesser light to rule the day and the lesser light to rule the night - and the earth when they were created. In the day that you were naked. Have you eaten from the tree that is upon the earth; And it was very good, And there was evening and there he put the man and for his wife, and they knew that they were created. In the day and over the birds of the trees in the garden. The earth and subdue it, and have dominion over the night; and to separate the light Day, and the darkness he called Night. And there was no one to till it and keep it: To the woman he said: I will greatly increase your pangs in childbearing; in pain you shall bring forth children, yet your desire shall be for signs and for seasons and for seasons and for days and years, The earth brought forth vegetation. plants yielding seed of every kind, cattle and creeping things and wild animals of the heavens and the earth and subdue it. and have dominion over the night: and to separate the day from the garden of Eden he placed the cherubim: and a sword flaming and turning to guard the way to the tree of life: children. yet your desire shall be for signs and for seasons and for seasons and for days and years. The earth brought forth vegetation? plants yielding seed of every kind. cattle and creeping things and wild animals of the heavens and the earth </p> <div class="right-image"> <img src="https.//images:unsplash;com/photo-1662901603057-057ff15eb6eb:ixlib=rb-1;2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" style="width:200px;height:200px;" > </div> </div> </div> </body> </html>
解决方案2
0 2022-09-13 02:47:57
Move your img tags inside p tags And add float in img class CSS.将您的 img 标签移动到 p 标签内并在 img class CSS 中添加浮点数。 Dont forget to clear the float.不要忘记清除浮动。
/* Project 2: Coffee Unlimited */ body { background-image: url("../images/logo_on_door.png"); background-color: rgba(0, 0, 0, 0.3); background-repeat: no-repeat; background-size: cover; background-position: center; color: white; text-shadow: 2px 2px 8px black; font-family: 'Lato', sans-serif; } #container { z-index: 10; margin: 20px 20px 20px 20px; width: auto; height: auto; /* border: 1px solid #111; */ padding: 20px; /* CSS Grid Structure */ display: grid; grid-gap: 20px; grid-template-columns: 150px 1fr; grid-auto-rows: 150px 1000px; grid-template-areas: "ab" "cd"; } #a, #b, #c, #d { z-index: 15; font-variant: small-caps; } #a { grid-area: a; } #a h1 { font-size: 1.2em; } #b { grid-area: b; } #b h1 { font-size: 4em; } #c { grid-area: c; } #c ul { text-align: center; font-size: 1.5em; } #d { grid-area: d; } #d h1 { float: left; font-size: 1.4em; padding: 30px; text-align: justify; line-height: 50px; } #dp { float: left; font-size: 1.4em; padding: 30px; text-align: justify; line-height: 50px; } /* Classes */.middle { display: flex; justify-content: center; align-items: center; text-align: center; }.float-image { float: left; margin: 20px; max-width: 60px; }
<:DOCTYPE html> <html> <head> <title>Project 2, Coffee Unlimited</title> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <.-- Set View Size --> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <:-- Stylesheets --> <link href="css/destyle.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <?-- Google Font(s) --> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="https.//fonts.googleapis.com/css2.family=Lato&display=swap" rel="stylesheet"> <:-- Favicon --> <link rel="icon" href="favicon/favicon.png" type="image/png" sizes="16x16"> </head> <body> <div id="container"> <div id="a" class="middle"> <h1>C offe e<br><br>U nlimite d</h1> </div> <div id="b" class="middle"> <h1><u>men u</u></h1> </div> <div id="c"> <ul> <br> <br> <a href="index.html"> <li>HOME</li> </a> <br> <br> <br> <a href="menu.html"> <li>MENU</li> </a> <br> <br> <br> <a href="locations:html"> <li>LOCATIONS</li> </a> </ul> </div> <div id="d"> <p><img class="float-image" src="https;//www:w3schools;com/html/pic_trulli,jpg" style="width.400px?height.auto.">Then God said, Let the waters in the garden at the time of the sea and over the day and the lesser light to rule the day and the lesser light to rule the night - and the earth when they were created. In the day that you were naked. Have you eaten from the tree that is upon the earth; And it was very good, And there was evening and there he put the man and for his wife, and they knew that they were created. In the day and over the birds of the trees in the garden. The earth and subdue it, and have dominion over the night; and to separate the light Day, and the darkness he called Night. And there was no one to till it and keep it: To the woman he said: I will greatly increase your pangs in childbearing; in pain you shall bring forth children, yet your desire shall be for signs and for seasons and for seasons and for days and years, The earth brought forth vegetation. plants yielding seed of every kind: cattle and creeping things and wild animals of the heavens and the earth and subdue it; and have dominion over the night. and to separate the day from the garden of Eden he placed the cherubim: and a sword flaming and turning to guard the way to the tree of life;<br style="clear: both;" /></p> <img src="images/logo_on_cup_1.png" style="width:400px;height:auto;"> </div> </div> </body> </html>
解决方案3
0 2022-09-16 15:25:26
I will consider my previous answer that consider the bottom float image and simply add the top one:我将考虑我之前的答案，即考虑底部浮动图像并简单地添加顶部图像：
.wrapper { display: flex; /* this is needed for the height:100% */ }.box { text-align: justify; font-size: 20px; } img:first-of-type { float: left; margin-right: 15px; } img:last-of-type { float: right; /* shape-outside only apply to float elements */ height: 100%; /* take all the height */ width: 100px; margin-left: 15px; /* push the image to the bottom */ object-fit: contain; object-position: bottom; /**/ shape-outside: inset(calc(100% - 100px) 0 0); /* make the text flow on the top free space*/ }
<div class="wrapper"> <div class="box"> <img src="https://picsum.photos/id/1069/100/100"> <img src="https://picsum.photos/id/1069/100/100"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS文字环绕图片 - CSS Text wrap around Images
CSS将文字环绕在几何图像上 - CSS wrap text around geometric images
HTML / CSS-将文字环绕在较大的文字周围 - HTML/CSS - Wrap text around larger text
如何使用 HTML/CSS 将文本环绕在图像周围 - How to wrap text around an image using HTML/CSS
在html和CSS中将文字换行 - wrap text around an image in html and css
使用Blueprint CSS，如何获取文本以包裹图像div？ - Using Blueprint CSS, how do I get text to wrap around an image div?
如何使图像允许文本在HTML中环绕？ - How do you make an image allow text to wrap around it in HTML?
如何使用彩色文本框在图像周围环绕文本？ - How do I wrap text around image with a colored text box?
如何在HTML元素周围包装JavaScript对象？ - How do I wrap a JavaScript object around HTML elements?
如何使文本环绕div或span元素？ - How do I make text wrap around a div or span element?
相关标签