All geek questions in one place

How can I make my inline divs snuggle together, even if they are different sizes?

I have a problem displaying the new website I'm working on. In principle, all content will be shown in 2 columns, and when viewed from a smaller screen, it will decrease to 1.

When I added content to these fields, the first “column” in the second row will be below the second element in the first “row”, I would like my next row down to keep its margin from the element directly above it, and not the element that was in last analyzed.

Here is an example of my problem:

body{
  background-color:lightgray;  
}

.box{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  
  width:48%;
  margin:1%;
  padding:10px;
  
  background-color:white;
  
  display:inline-block;
  float:left;
}
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
  <div class="box">
    <h1>Box 1</h1>
    Test content 1
  </div>
  <div class="box">
    <h1>Box 2</h1>
    its a bit longer<br/>
    than the last one<br/>
    <br/>
    its a lot longer<br/>
    than the last one actually<br/>
  </div>
  <div class="box">
    <h1>Box 3</h1>
    its cold and lonely down here :(<br/>
    I want to be with my waifu Box 1<br/>
  </div>
</body>
</html>
Run code

Here's how I really want it to look: I actually want this

How can I change styles to suit this? Is it possible?

+4
3

:nth-child(), 2n .

* {
  box-sizing: border-box;
}
body {
  background-color: lightgray;
}
.box {
  width: 48%;
  margin: 1%;
  padding: 10px;
  background-color: white;
  float: left;
}
.box:nth-child(2n) {
  float: right;
}
<div class="box">
  <h1>Box 1</h1> Test content 1</div>
<div class="box">
  <h1>Box 2</h1> its a bit longer
  <br/>than the last one<br/>
  <br/>its a lot longer
  <br/>than the last one actually<br/>
</div>
<div class="box">
  <h1>Box 3</h1> its cold and lonely down here :(
  <br/>I want to be with my waifu Box 1<br/>
</div>
<div class="box">
  <h1>Box 4</h1> its cold and lonely down here :(
  <br/>I want to be with my waifu Box 1<br/>
</div>
+2

- .

css flex , : https://codepen.io/cssgirl/pen/NGKgrM

body{
  background-color:lightgray;  
  display:flex;
  flex-flow: row wrap;
}

.box{
  padding:10px;
  margin:10px;
  background-color:white;
  width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
  <div class="box">
    <h1>Box 1</h1>
    Test content 1
  </div>
  <div class="box">
    <h1>Box 2</h1>
    its a bit longer<br/>
    than the last one<br/>
    <br/>
    its a lot longer<br/>
    than the last one actually<br/>
  </div>
  <div class="box">
    <h1>Box 3</h1>
    its cold and lonely down here :(<br/>
    I want to be with my waifu Box 1<br/>
  </div>
</body>
</html>
+1

You can achieve this using the CSS3 :nth-child()Selector

body{
  background-color:lightgray;  
}

.box{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  
  width:48%;
  margin:1%;
  padding:10px;
  
  background-color:white;
  
  display:inline-block;
  float:left;
}
.box:nth-child(even){
  float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
  <div class="box">
    <h1>Box 1</h1>
    Test content 1
  </div>
  <div class="box">
    <h1>Box 2</h1>
    its a bit longer<br/>
    than the last one<br/>
    <br/>
    its a lot longer<br/>
    than the last one actually<br/>
  </div>
  <div class="box">
    <h1>Box 3</h1>
    its cold and lonely down here :(<br/>
    I want to be with my waifu Box 1<br/>
  </div>
</body>
</html>
Run code
0
source

Source: https://habr.com/ru/post/1660402/

More articles:


All Articles