CODEWITHSUNDEEP
htmlcss
user13618351
user13618351

Reputation:

Aligning divs with just display inline and inline-block

.box {
    background: maroon;
    width: 200px;
    height: 150px;
}
.box-1 {
    border: 5px solid black;
}
.box-2 {
    display: inline-block;
    border: 5px double black;
}
.box-3 {
    display: inline-block;
    border: 5px dashed black;
}
.box-4 {
    display: inline-block;
    border: 5px dotted black;
}
.box-5 {
    display: inline-block;
    border: none;
}
 <body>
      <div class="box box-1"></div>
      <div class="box box-2"></div>
      <div class="box box-3"></div>
      <div class="box box-4"></div>
      <div class="box box-5"></div>
  </body>

I'm having trouble with aligning the third and fourth div. As per the above code, I'm getting this. However, I've not styled the third and fourth div (that's what I'm asking here) and the desired style is this. I've told not to use flexbox or grid, and use just only box model's basic display properties like inline and inline-block.

Upvotes: 0

Views: 48

Answers (2)

Pay it forward
Pay it forward

Reputation: 461

You can use another DIV for rows and make your boxes all "display: inline-block;"

.box-row {
    display: block;
    border: 1px solid #00FF00;
}

.box {
    display: inline-block;
    background: maroon;
    width: 200px;
    height: 150px;
}
.box-1 {
    display: inline-block;
    border: 5px solid black;
}
.box-2 {
    display: inline-block;
    border: 5px double black;
    margin-right: 20px;
}
.box-3 {
    display: inline-block;
    border: 5px dashed black;
    margin-left: 20px;
}
.box-4 {
    display: inline-block;
    border: 5px dotted black;
    margin-right: 20px;
}
.box-5 {
    display: inline-block;
    border: none;
    margin-left: 20px;
}
 <body>
      <div class="box-row">
        <div class="box box-1"></div>
      </div>
      <div class="box-row">
        <div class="box box-2"></div>
        <div class="box box-3"></div>
      </div>
      <div class="box-row">
        <div class="box box-4"></div>
        <div class="box box-5"></div>
      </div>
  </body>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272648

Use float:

.box {
  background: maroon;
  width: 200px;
  height: 150px;
  box-sizing:border-box;
  float: left;
  margin: 10px;
}

.box-1 {
  border: 5px solid black;
}

.box-2 {
  clear: left; /* start a new line here */
  border: 5px double black;
}

.box-3 {
  border: 5px dashed black;
}

.box-4 {
  clear: left; /* and here */
  border: 5px dotted black;
}
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

Using inline-block you can try like below:

.box {
  background: maroon;
  width: 200px;
  height: 150px;
  box-sizing:border-box;
  display: inline-block;
  margin: 10px;
}

.box-1 {
  display:block;
  border: 5px solid black;
}

.box-2 {
  border: 5px double black;
}

.box-3 {
  border: 5px dashed black;
}


.box-4 {
  display:inline;
}
.box-4::before {
  content:"\A";
  white-space:pre;
}
.box-4::after {
  content:"";
  border: 5px dotted black;
  background: maroon;
  width: 200px;
  height: 150px;
  box-sizing:border-box;
  display: inline-block;
  margin: 10px;
}
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box-4"></div>
<div class="box box-5"></div>

Upvotes: 0

Related Questions