0
votes

Comment puis-je faire cette mise en page spécifique dans HTML? Texte enveloppé dans le coin droit / le corps ci-dessous

Quelqu'un peut-il savoir comment créer une mise en page similaire à celle-ci dans HTML? J'essaie de créer une mise en page basée sur une "profil" où elle affiche une image où le nom de la personne est directement dans le coin droit et une description est sous l'en-tête, mais toujours à droite de l'image. Voici une photo de ce que j'essaie de créer ce que j'ai essayé de faire.

<body>

  <h2>Image Text</h2>
  <p>Add some text to an image in the top right corner:</p>

  <div class="container">
    <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
    <div class="topright">NAME HERE </div>
    Sample text goes here
  </div>

</body>

html css image layout

1 commentaires

Voir le lien Stackoverflow.com/questions/57776067/...

3 Réponses :

1
votes

Vous pouvez commencer par quelque chose comme ça, j'ai fabriqué une légère modification à HTML.

Vous pouvez utiliser flex code> pour la classe code> Conteneur code> qui rendra le contenu à circuler dans rangée code>. li>.
Vous avez besoin du bon contenu pour être dans la colonne afin d'ajouter flex code> et direction code> propriété sur .toChight {...} code> cela donnera vous contentez un en dessous de l'autre. li> ol> blockQuote> p> <body> <h2>Image Text</h2> <p>Add some text to an image in the top right corner:</p> <div class="container"> <img src="http://placekitten.com/301/301" alt="Cinque Terre" width="300" height="300"> <div class="topright">NAME HERE <div class="text"> What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has? Easily generate Lorem Ipsum placeholder text in any number of characters, words sentences or paragraphs. Learn about the origins of the passage </div> </div> </div> </body>

0 commentaires

0
votes

Vous pouvez ajouter IMG à DIV Tag et fournir de la largeur aux deux divs.

    .container {
       position: relative;
    }

    .topright {
      top:0;
      margin-left:20px;
      position:absolute;
      font-size: 18px;
   }
   .d-block{
    dispaly:block;
   }
   img{width:100%}

  .w-50{
    width:48%;
    display:inline-block
   }

 <div class="container">
<div class="w-50">
    <img src="img_girl.jpg" alt="Cinque Terre" >
</div>
<div class="topright w-50">
    <p class="d-block">NAME HERE</p> 
    <p class="d-block">Sample text goes here</p>
</div>

0 commentaires

2
votes

<!DOCTYPE>
<html>
    <head>
    <style>
        .img{
            width:250px;
            height:250px;
        }
        h1{
            display: inline-block;
            vertical-align: top;
        }
        .text{
            display: inline-block;
            vertical-align: top;
            display: inline-block;
            width: 330px;
            padding-left: 15px;
        }
        p{
            font-size: 15px;
        }
    </style>
    </head>
    <body>
        <image class="img" src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg"></image>
    <div class='text'>
        <h1>NAME HERE</h1>
        <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>
    </div>
    </body>
</html>

0 commentaires