Question

我试图将多个div并排排列。我搜索了stackoverflow并将我的代码基于此How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/。

我已经玩过它，最后得到了这个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>

结果如下：

div alignment

我希望能够在左侧放置多个div，在右侧放置多个div。现在代码工作正常，当我只使用一个右和一个左div，但有多个div它就像在图片中。

最好的问候。

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

Answer 2

我想这可能对你有帮助

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>

或者这个

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>

Answer 3

将float: left放到.frontpageBoxLeft选择器可以解决问题。

Answer 4

尝试将frontpageBoxContainer设置为position:relative
浮动左侧和右侧容器。
将left或right偏移设置为您要对齐的div。

并排对齐多个div

4 个答案: