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

几个要提到的指针：

body标记不需要ID，应将ID添加到体内的div标签
您的第一张图片在body标签上方，请记住包括所有您体内的内容html
您的段落具有许多相似的样式属性值，请考虑为这些做一堂课。您可以在标签中添加多个类。
避免添加内联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>

祝你好运

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

2 个答案: