将两个div排列在一起，两个在下一行。

Question

我正在尝试将多个div与一个相对于屏幕大小的width对齐。

然而，当我试图让它们一个接一个地浮动时，它们会跳到另一个下面的右边。我曾尝试将display: inline-block;和float: left; a添加到divs中，但似乎也不起作用。

What I'm trying to achieve

What is happening

​

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

​

Answer 1

我认为您正在寻找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%;
}