如何将文字放在图片旁边？

Question

我想知道如何将文本移动到图像旁边！ 我不知道如何用第一张照片来制作，但是我不能用第二张照片。

 p.mytext { color: aliceblue; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; border: 2px solid; border-color: whitesmoke; margin-left: 90px; margin-right: 750px; margin-bottom: 150px; font-family: Lucida Sans Unicode; } p.secondtext { color: white; border: 2px solid; border-color: whitesmoke; font-family: Lucida Sans Unicode; padding-left: 15px; padding-right: 15px; margin-left: 90px; margin-right: 500px; float: left; } 

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>About me</title> <link href="../CSS/main.css" rel="stylesheet" type="text/css"> </head> <img class="clip" src="../images/clip.png" width="300"> <body id="aboutme"> <h1 class="titulo">About me</h1> <h2>INFORMATION</h2> <img class="picofme" src="../images/juli.JPG" width="400"> <p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps every day"</p> <img class="china" src="../images/china.JPG" width="450"> <p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra los invasores franceses para restablecer en el trono al monarca legítimo.</p> </body> </html> 

Answer 1

我想你想要这个。

 .flex { display:flex; margin: 20px 0; } .flex img { margin:0 20px 0 0; } .flex p { border: 2px solid; border-color: whitesmoke; padding:20px; margin:0; } 

 <img class="clip" src="https://picsum.photos/300/100"> <body id="aboutme"> <h1 class="titulo">About me</h1> <h2>INFORMATION</h2> <div class="flex"> <img class="picofme" src="https://picsum.photos/300/300" width="400" > <p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps every day"</p> </div> <div class="flex"> <img class="china" src="https://picsum.photos/300/300" width="450"> <p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra los invasores franceses para restablecer en el trono al monarca legítimo.</p> </div> </body> 

Answer 2

有几点要提的要点：

1. body标签不需要ID，该ID应该添加到body的div标签中
2. 您的第一张图片在body标签上方，请记住在body中包含所有内容html
3. 您的段落具有许多相似的样式属性值，请考虑为其创建一个类。 您可以在标签中添加多个类。
4. 避免添加内联CSS：您的img宽度在宽度上非常相似。 出于演示目的，我创建了一个宽度为425（中间）的类，并删除了400/425内联样式

我注释掉了要扔掉位置的边距，然后将段落的颜色文本更改为黑色（正好可以看到它！）

被注释掉的底部img类（在我的代码中）是可用于图像的css的示例。 第二行是影响该代码段的img css。

 #aboutme{float:left;} p{color:#000000; width:60%; display:inline-block; float:right;} img{max-width:32%; padding:30px 25px; float:left; height:auto; vertical-align:middle;} p, img{ display:inline-block; vertical-align:top;} .mytext { /*color: aliceblue;*/ padding: 15px; border: 2px solid; border-color: whitesmoke; /*margin-left: 90px; margin-right: 75px; margin-bottom: 150px;*/ font-family: Lucida Sans Unicode; } .secondtext { /*color: #ffffff;*/ border: 2px solid; border-color: whitesmoke; font-family: Lucida Sans Unicode; padding-left: 15px; padding-right: 15px; /*margin-left: 90px; margin-right: 500px;*/ /*float: left;*/ } /*.picofme{width:400px;height:auto;} .china{width:450px;height:auto;}*/ 

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>About me</title> <link href="../CSS/main.css" rel="stylesheet" type="text/css"> </head> <body> <img id="clip" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" > <div id="aboutme"> <h1 class="titulo">About me</h1> <h2>INFORMATION</h2> <img class="picofme" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" > <p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps every day"</p> <img class="china" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" > <p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra los invasores franceses para restablecer en el trono al monarca legítimo.</p> </div> </body> </html> 

祝好运