How to leave a text (on the left) on the photo side (right side) in the same div? I am new and I am very lost

Asked

Viewed 75 times

-2

.projeto2 {
  display: flex;
  width: 100%;
  margin: 0px;
  padding: 30px 0px 20px 0px;
  background-color: #2042CC;
  flex-wrap: wrap;
}

.sobre-projeto2 {
  flex: 50%;
  padding: 0px 50px;
  padding-left: 30px;
  padding-right: 30px;
}

.sobre-projeto2 h1 {
  font-size: 30px;
  text-align: center;
}

.sobre-projeto2 p {
  text-align: center;
}

.imagem2 {
  flex: 50%;
  padding: 50px 50px;
  right: 100%;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Save The World</title>

  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <section id="menu2" class="projeto2">

    <div class="sobre-projeto2">

      <h2>Causa das mudanças</h2>
      <p>As mudanças climáticas podem ter causas naturais como alterações na radiação solar e dos movimentos orbitais da Terra ou podem ser consequência das atividades humanas. O Painel Intergovernamental de Mudanças Climáticas (IPCC), órgão das Nações Unidas,
        responsável por produzir informações científicas, afirma que há 90% de certeza que o aumento de temperatura na Terra está sendo causado pela ação do homem. A partir da Revolução Industrial o homem passou a emitir quantidades significativas de
        gases de efeito estufa (GEE), em especial o dióxido de carbono. Neste período, a concentração original de 280 ppm4 deste gás cresceu até os atuais 400 ppm5, intensificando significativamente o efeito estufa. Assim, as atividades humanas passaram
        a ter influência importante nas mudanças climáticas.
      </p>

      <div class="imagem2">
        <img src="fumaça.jpg" alt="fabricas liberando c02"> (https://imgur.com/lxJGq3l)

      </div>

  </section>

</body>

</html>

html css div alignment

3 answers

0

If I got it right, you want to put the text next to the image (left text, right image).

To do so, simply involve the h2 and the p with a div, and in his class sobre-projeto2, include ownership display: flex.

Example

Note: Your code lacked the closure of a div before the closure of section

  • just like you did and I’ve been through this div so many times and I hadn’t noticed this mistake so tosco kkk, but it’s just like that and I even liked the photo you used more

0

Your question doesn’t sound very good. In addition to the title, put a text describing your problem, however, there is a super simple way for you to perform this action:

Use a div to wrap the container (I put the name of the "parent" class) with the display properties: flex, flex-wrap: wrap (will break the content). In the div daughters of this container, divide in percentages according to your need using flex-Basis (I put half for each - 50%).

* {
  margin: 0;
  padding: 0;
}

.projeto2 {
  width: 100%;
  margin: 0px;
  padding: 30px 0px 20px 0px;
  background-color: #2042CC;
}

.pai {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 20px;
}

.sobre-projeto2 {
  flex-basis: 50%;
}

.sobre-projeto2 h2 {
  font-size: 30px;
  text-align: center;
  margin-bottom: 10px;
}

.sobre-projeto2 p {
  text-align: center;
}

.imagem2 {
  flex-basis: 50%;
  margin: 0 auto;
}

.imagem2 img {
  width: 80%;
  margin: 10px;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Save The World</title>

  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">

</head>

<body>
  <section id="menu2" class="projeto2">
    <div class="pai">
      <div class="sobre-projeto2">
        <h2>Causa das mudanças</h2>
        <p>As mudanças climáticas podem ter causas naturais como alterações na radiação solar e dos movimentos orbitais da Terra ou podem ser consequência das atividades humanas. O Painel Intergovernamental de Mudanças Climáticas (IPCC), órgão das Nações
          Unidas, responsável por produzir informações científicas, afirma que há 90% de certeza que o aumento de temperatura na Terra está sendo causado pela ação do homem. A partir da Revolução Industrial o homem passou a emitir quantidades significativas
          de gases de efeito estufa (GEE), em especial o dióxido de carbono. Neste período, a concentração original de 280 ppm4 deste gás cresceu até os atuais 400 ppm5, intensificando significativamente o efeito estufa. Assim, as atividades humanas passaram
          a ter influência importante nas mudanças climáticas.
        </p>
      </div>

      <div class="imagem2">
        <img alt="fabricas liberando c02" src="https://i.imgur.com/lxJGq3l.jpg">
      </div>
    </div>

  </section>

</body>

  • Thank you so much for your help! and I’m sorry if my answer was not very clear... I just tried to be as direct as possible, next time I’ll remember to be more polite and clear, and again thank you there, now I understood because nothing I did was working. my fight now is to understand why at the time to put the cell phone the block where ta div ta going to the side and disappearing kkkk

  • Study responsiveness and media that will become easy: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

0

.projeto2 {
  display: flex;
  justify-content:space-between;
  width: 100%;
  margin: 0px;
  text-align:justify;
  background: #d28000;
  padding: 4px;
}

.imagem2 {
  width: 40vw;
  margin-left: 20px;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Save The World</title>

  <link href="https://fonts.googleapis.com/css2?family=Roboto display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <section class="projeto2">
    <div class="sobre-projeto2">
      <center><h2>Causa das mudanças</h2></center>
      <p>As mudanças climáticas podem ter causas naturais como alterações na radiação solar e dos movimentos orbitais da Terra ou podem ser consequência das atividades humanas. O Painel Intergovernamental de Mudanças Climáticas (IPCC), órgão das Nações Unidas,
        responsável por produzir informações científicas, afirma que há 90% de certeza que o aumento de temperatura na Terra está sendo causado pela ação do homem. A partir da Revolução Industrial o homem passou a emitir quantidades significativas de
        gases de efeito estufa (GEE), em especial o dióxido de carbono. Neste período, a concentração original de 280 ppm4 deste gás cresceu até os atuais 400 ppm5, intensificando significativamente o efeito estufa. Assim, as atividades humanas passaram
        a ter influência importante nas mudanças climáticas.
      </p>
     </div>
     <div class="imagem2">
      <img src="https://i.imgur.com/lxJGq3l.jpg" alt="fabricas liberando c02"> 
      </div>
  </section>
</body>

  • thank you very much, it worked out and ta mto compact! one day I arrive at this level kkkk

  • You’re welcome Lwcky! That nothing kkk. Then try to do a review, maybe you can compress a little more. Vlws!

Browser other questions tagged html css div alignment

You are not signed in. Login or sign up in order to post.