Align contents of div

Asked

Viewed 55 times

-1

I have the following layout: inserir a descrição da imagem aqui

I would like to align the images next to each other, but with the text always at the top. Is there any solution to this problem other than a resolution with position: absolute (because it would hinder the responsiveness)?

Follows my code:

* {
  box-sizing: border-box;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

html {
  font-size: 20px;
}

html,
body {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.movies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-height: 1800px;
  max-width: 1440px;
  height: 100%;
  width: 100%;
}

.movies__box {
  background-color: black;
  color: white;
  margin: 20px;
  max-width: 400px;
  padding: 10px;
  text-align: left;
  width: 100%;
}

.movies__box h1 {
  font-size: 2rem;
}

.movies__box p {
  font-size: 1.3rem;
  margin: 15px 0;
}

.movies__box img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 80%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="movies">
    <div class="movies__box">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nihil quas sit pariatur libero quidem corrupti doloremque commodi accusantium quisquam quibusdam enim, maxime, repudiandae exercitationem ex laudantium illo, quam vero.</p>
      <img src="https://underscoremusic.co.uk/site/wp-content/uploads/2014/05/no-poster.jpg">
    </div>
    <div class="movies__box">
      <h1>Lorem ipsum, dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit magnam ducimus, dolores harum laboriosam iure incidunt quod necessitatibus sequi ex?</p>
      <img src="https://underscoremusic.co.uk/site/wp-content/uploads/2014/05/no-poster.jpg">
    </div>
    <div class="movies__box">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nihil quas sit pariatur libero quidem corrupti doloremque commodi accusantium quisquam quibusdam enim, maxime, repudiandae exercitationem ex laudantium illo, quam vero.</p>
      <img src="https://underscoremusic.co.uk/site/wp-content/uploads/2014/05/no-poster.jpg">
    </div>
  </div>
</body>

</html>

html css

  • The text will be at most the size of the first item?

  • Yes, exactly!

  • ever tried to use bootstrap?

1 answer

2


A solution is using flex in the co "card" that would be your dis with class .movies__box , then you put flex-direction: column for the text and image to be one above the other and to end a simple margin-top: auto in the image will make them align at the end of the container, as in the image below. Only 3 lines of CSS has been automatically aligned, regardless of the amount of text! ;)

inserir a descrição da imagem aqui

Follow the image code above. Display the code in full screen!

* {
  box-sizing: border-box;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

html {
  font-size: 20px;
}

html,
body {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.movies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-height: 1800px;
  max-width: 1440px;
  height: 100%;
  width: 100%;
}

.movies__box {
  background-color: black;
  color: white;
  margin: 20px;
  max-width: 400px;
  padding: 10px;
  text-align: left;
  width: 100%;

  display: flex;
  flex-direction: column;
}

.movies__box h1 {
  font-size: 2rem;
}

.movies__box p {
  font-size: 1.3rem;
  margin: 15px 0;
}

.movies__box img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 80%;

  margin-top: auto;
}
<div class="movies">
  <div class="movies__box">
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nihil quas sit pariatur libero quidem corrupti doloremque commodi accusantium quisquam quibusdam enim, maxime, repudiandae exercitationem ex laudantium illo, quam vero.</p>
    <img src="https://underscoremusic.co.uk/site/wp-content/uploads/2014/05/no-poster.jpg">
  </div>
  <div class="movies__box">
    <h1>Lorem ipsum, dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit magnam ducimus, dolores harum laboriosam iure incidunt quod necessitatibus sequi ex?</p>
    <img src="https://underscoremusic.co.uk/site/wp-content/uploads/2014/05/no-poster.jpg">
  </div>
  <div class="movies__box">
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nihil quas sit pariatur libero quidem corrupti doloremque commodi accusantium quisquam quibusdam enim, maxime, repudiandae exercitationem ex laudantium illo, quam vero.</p>
    <img src="https://underscoremusic.co.uk/site/wp-content/uploads/2014/05/no-poster.jpg">
  </div>
</div>

  • 1

    Thank you so much, that’s just what I needed!

  • @Thalesmaia without problems Thales good that helped!

Browser other questions tagged html css

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