Align elements in 2 columns within a div

Question

Align elements in 2 columns within a div

Navigation

#1 by (0 votes)

1

Is it possible to align different article s within a div , by touching the CSS of div ? You could also touch the CSS regarding the article , but these load according to the publications.

This is my code:

.izq{
  float: left;
	margin-left: 0px;
  border: 1px solid #000;
  width: 48%;
  clear: both;
	margin-left: 0;
  border: 1px solid;
}
.der{
  float: right;
	margin-right: 2.564102564102564%;
  width: 48%;
  border: 1px solid;
}

<div class="cotainer">
  <article class="izq">art1</article>
  <article class="der">art2<p>contiene 1 parrafo</article>
  <article class="izq">art3 mas texto <p> otra parrafo <p> otro parrafo</article>
  <article class="der">art4<br> mas texto<br> mas texto</article>
  <article class="izq">art5 <p> un par de parrafos </article>
  <article class="der">art6 <p> articulo 6 contiene <p> 4 parrafos en total<p> contando este</article>
</div>

Currently it looks something like this:

My intention is to square each "article" and leave it even in this way:

Observe the grid in the second case, whereas currently the horizontal line of even elements is not aligned.

Here what I did was to play with the element height of article , but this property only works if you enter the amount of height in px, and my intention is to be more "responsive".

css3 css

asked by manespgav 13.04.2017 в 13:13

source

1 answer

problem sending mail from localhost with phpmailer Can not read property '_aData' of undefined (Jquery - Datatable)

score 0 · Accepted Answer

You can do it by doing a grid with Flexbox. By default, a flex element whose address is row (horizontal) stretches to its children vertically, so that they all occupy the same height.

Also preference, give a fixed height to the images and a width to the boxes according to the resolution in which they are shown. For example, in mobile the images could be 200px high, in tablets, 250px, in laptops, 300px, etc. Likewise, the boxes can have an initial width of 80% of the screen and as the resolution grows, its width is reduced so that they can be shown horionally. You can do this easily through half queries.

Example

See the example in several resolutions to see how they change their width.

.posts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px;
}

.post {
  border-radius: 3px;
  box-shadow: 0 4px 2px 0 rgba(0, 0, 0, .25), 0 -1px 1px 0 rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  margin: 12px 5px;
  width: 80%;
}

.post figure {
  height: 200px;
  margin: 0;
  width: 100%;
}

.post figure img {
  height: 100%;
  width: 100%;
}

.post pre {
  color: #555;
  font-family: 'Noto Sans', sans-serif;
  font-size: 15px;
  line-height: 22px;
  overflow: hidden;
  padding: 0 10px;
  text-align: justify;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
}

@media screen and (min-width: 700px) {
  .posts {
    justify-content: space-between;
   }
   
  .post {
    width: 45%;
  }
}

@media screen and (min-width: 1024px) {
  .posts {
    justify-content: space-between;
   }
   
  .post {
    width: 30%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="posts">
    <article class="post">
      <figure>
        <img src="http://travelkids.es/Uploads/ImageGalleryModuleDto/ORLANDO.jpg" alt="">
      </figure>
      <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, tempora ad omnis harum excepturi neque illo. Deserunt suscipit nesciunt consequatur ullam, facere molestiae quo sequi. Officiis voluptate eos ipsa quod!</pre>
    </article>
    <article class="post">
      <figure>
        <img src="http://travelchannel.sndimg.com/content/dam/images/travel/fullset/2014/12/3/top-california-beach-getaways-venice-beach.jpg.rend.tccom.1280.960.jpeg" alt="">
      </figure>
      <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque temporibus ea necessitatibus consectetur animi, fuga minima deserunt vero placeat quas molestias accusantium reiciendis consequatur amet facilis consequuntur velit, neque omnis!</pre>
    </article>
    <article class="post">
      <figure>
        <img src="http://www.leannemoore.ie/wp-content/uploads/2016/09/london.jpg" alt="">
      </figure>
      <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem distinctio vitae eaque voluptatem, ratione aspernatur? Quidem laboriosam voluptate nam perferendis praesentium ut delectus, asperiores labore sed optio reprehenderit illo neque.</pre>
    </article>
    <article class="post">
      <figure>
        <img src="http://sitiosturisticos.com/wp-content/uploads/2011/05/Madrid.jpg" alt="">
      </figure>
      <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ad, voluptates aut, in nam veritatis. Tempore tenetur est doloremque ratione consectetur perferendis, voluptate odit beatae recusandae in id blanditiis odio?</pre>
    </article>
  </div>
</body>

</html>