Aligning multiple divs side by side

问题

I am trying to align multiple divs side by side. I have searched stackoverflow and based my code on this: How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/.

I've played around with it, and ended up with this css:

    .frontpageBoxLeft, .frontpageBoxRight {
  border-radius: 5px;
  border-color: lightgrey;
  background: #ffffff;
  height: 150px;
}

.frontpageBoxLeft {
  margin-bottom:15px;
  width: 750px;
  min-height: 100px;
  position: relative;
}

.frontpageBoxRight {
  width: 320px;
  float: right;
  height: 300px;
  position: relative;
  vertical-align: top;
}

.frontpageBoxContainer {
    width: 70%;
    height: 500px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

and this html:

  <div class="frontpageBoxContainer">
<p class="newsfeedheadline">NEWS FEED</p>
<hr class="hrstarter">
<div class="frontpageBoxLeft" id="1">
     et eksempel på en kasse1
</div>
<div class="frontpageBoxLeft" id="2">
     et eksempel på en kasse2
</div>
<div class="frontpageBoxLeft" id="3">
     et eksempel på en kasse3
</div>
<div class="frontpageBoxRight">
     et eksempel på en anden kasse
</div>
</div>

The result is this:

div alignment

I would like to be able to put multiple divs on the left side, and multiple divs on the right side. Right now the code works fine when iam only using one right and one left div, but with multiple divs it act like in the picture.

Best regards.

回答1:

.frontpageBoxLeft,
.frontpageBoxRight {
  border-radius: 5px;
  border-color: lightgrey;
  background: #ffffff;
  height: 150px;
}

.left-container {
  float: left;
  width: 750px;
}

.frontpageBoxLeft {
  margin-bottom: 15px;
  width: 750px;
  display: inline-block;
  min-height: 100px;
  float: right;
  position: relative;
  outline: 1px solid red;
}

.frontpageBoxRight {
  width: 540px;
  float: right;
  height: 300px;
  position: relative;
  vertical-align: top;
  outline: 1px solid red;
}

.frontpageBoxContainer {
  width: 1300px;
  height: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="frontpageBoxContainer">
<p class="newsfeedheadline">NEWS FEED</p>
<hr class="hrstarter">
  <div class="left-container">
  <div class="frontpageBoxLeft" id="1">
     et eksempel på en kasse1
</div>
<div class="frontpageBoxLeft" id="2">
     et eksempel på en kasse2
</div>
<div class="frontpageBoxLeft" id="3">
     et eksempel på en kasse3
</div>
  </div>

<div class="frontpageBoxRight">
     et eksempel på en anden kasse
</div>
</div>

回答2:

I guess this might help you

div{
  width: 48%;
  height: 100px;
  background-color: red;
  float: left;
  margin: 1%;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

or this one

div{
  width: 23%;
  height: 100px;
  background-color: red;
  float: left;
  margin: 1%;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

回答3:

Put float: left to the .frontpageBoxLeft selector will solve the problem.

回答4:

Try set the frontpageBoxContainer to position:relative
Float the left AND the right Containers.
set left or right Offset to the divs you want to align.

来源：https://stackoverflow.com/questions/40125435/aligning-multiple-divs-side-by-side

标签

html

css

alignment