并排对齐多个div [英] Aligning multiple divs side by side

问题描述

我正在尝试并排对齐多个div。
我已经搜索了stackoverflow，并基于此创建了我的代码：的并排对齐两个div。

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/.

我玩过它，最后得到了这个CSS：

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;
}

和此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>

结果是这样的：

< a href = https://i.stack.imgur.com/UyB29.png rel = nofollow noreferrer> div对齐

希望能够在左侧放置多个div，在右侧放置多个div。
现在，当iam仅使用一个右div和一个左div时，代码可以正常工作，但是使用多个div时，就像在图片中一样。

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.

最好的问候。

推荐答案

.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>

这篇关于并排对齐多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！