时间戳

首页 > 解决方案 > 对齐两个相邻的 div，并在下一行对齐两个

html - 对齐两个相邻的 div，并在下一行对齐两个

问题描述

我正在尝试将多个divs 与width相对于屏幕尺寸的相对对齐。

但是，当我尝试将它们彼此相邻浮动时，它们会跳到彼此下方的右侧。我试图将 adisplay: inline-block;和float: left;a放在divs 上，但这似乎也不起作用。

我想要达到的目标

怎么了

#navbarselector {
  float: left;
  width: 75%;
  height: 8%;
  z-index: 1;
  background-color: #B4ADA5;
}

#ButtonOpt {
  float: left;
  width: 23%;
  height: 8%;
  margin-left: 2%;
  z-index: 3;
  background-color: #B4ADA5;
}

#view-2,
#view-1,
#view-interieur-2,
#view-interieur-1,
#view-begane-grond,
#view-eerste-verdieping,
#view-tweede-verdieping,
#view-derde-verdieping {
  float: left;
  width: 75%;
  height: 540px;
  z-index: 2;
  padding-top: 30px;
}

#tabs-1,
#tabs-2,
#tabs-3,
#tabs-4,
#tabs-5,
#tabs-6,
#tabs-7,
#tabs-8 {
  float: left;
  width: 75%;
  height: 540px;
  border: 1px;
  z-index: 2;
  background-color:
}

#cmcVGVL,
#cmcAGVL,
#cmcIVGVL,
#cmcIAGVL,
#cmcBG,
#cmcV1,
#cmcV2,
#cmcV3 {
  float: left;
  width: 25%;
  height: 535px;
  z-index: 1;
  margin-left: 1%;
  background-color: #ab9882;
  padding-top: 30px;
}
<div class="container">
  <div class="nav nav-tabs" id="navbarselector" role="tablist">
    <a class="nav-item nav-link active rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-1" role="tab" aria-controls="nav-home" aria-selected="true">2</a>
    <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-2" role="tab" aria-controls="nav-1" aria-selected="false">1</a>
    <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-3" role="tab" aria-controls="nav-1" aria-selected="false">Interieur 2</a>
    <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-4" role="tab" aria-controls="nav-1" aria-selected="false">Interieur 1</a>
    <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-5" role="tab" aria-controls="nav-1" aria-selected="false">Begane grond</a>
    <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-6" role="tab" aria-controls="nav-1" aria-selected="false">Eerste verdieping</a>
    <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-7" role="tab" aria-controls="nav-1" aria-selected="false">Tweede verdieping</a>
    <a class="nav-item nav-link rounded-0" id="nav-home-tab" data-toggle="tab" data-target="#tabs-8" role="tab" aria-controls="nav-1" aria-selected="false">Derde verdieping</a>
  </div>
  <div id="ButtonOpt">
    <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn">Geselecteerde opties &#9660;</button>
      <div id="myDropdown" class="dropdown-menu"></div>
    </div>
    <div class="tab-content">
      <div class="tab-pane active" id="tabs-1" role="tabpanel">
        <div class="tab-pane" id="view-2"></div>
        <div class="tab-pane" id="cmcVGVL"></div>
      </div>
      <div class="tab-pane" id="tabs-2" role="tabpanel">
        <div class="tab-pane" id="view-1"></div>
        <div class="tab-pane" id="cmcAGVL"></div>
      </div>
      <div class="tab-pane" id="tabs-3" role="tabpanel">
        <div class="tab-pane" id="view-interieur-2"></div>
        <div class="tab-pane" id="cmcIVGVL"></div>
      </div>
      <div class="tab-pane" id="tabs-4" role="tabpanel">
        <div class="tab-pane" id="view-interieur-1"></div>
        <div class="tab-pane" id="cmcIAGVL"></div>
      </div>
      <div class="tab-pane" id="tabs-5" role="tabpanel">
        <div class="tab-pane" id="view-begane-grond"></div>
        <div class="tab-pane" id="cmcBG"></div>
      </div>
      <div class="tab-pane" id="tabs-6" role="tabpanel">
        <div class="tab-pane" id="view-eerste-verdieping"></div>
        <div class="tab-pane" id="cmcV1"></div>
      </div>
      <div class="tab-pane" id="tabs-7" role="tabpanel">
        <div class="tab-pane" id="view-tweede-verdieping"></div>
        <div class="tab-pane" id="cmcV2"></div>
      </div>
      <div class="tab-pane" id="tabs-8" role="tabpanel">
        <div class="tab-pane" id="view-derde-verdieping"></div>
        <div class="tab-pane" id="cmcV3"></div>
      </div>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

我认为您正在寻找 CSS 网格实现。尝试这个。您将立即启动并运行。

https://learncssgrid.com/

// HTML
<div class='container'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

// CSS
.container{
  display: grid;
  grid-template-column: 70% 30%;
}

推荐阅读