并排设置两组div类

Question

我试图将这两组课程并排设置，但我无法...... 我试图使用display：flex，float：left和任何其他css属性但在这里没有工作。

＆＃13;

＆＃13;

.building{
	width: 100px;
	height: 200px;
	margin:auto;
	background-color: #843533;
  border-style: solid;
  box-shadow: 2px 2px black;
  padding: 10px;
}

.building .windowL{
	width: 30px;
	height: 40px;
	background-color: #8e8383;
	margin-bottom: 10px;
	
}
.building .windowR{
	width: 30px;
	height: 40px;
	background-color: #8e8383;
	margin-bottom: 10px;
	margin-left:40px;
	
}

＆＃13;

  	<div class="building">
      	<div class="windowL"></div>
      	<div class="windowL"></div>
      	<div class="windowL"></div>
        <div class="windowL"></div>
      	<div class="windowR"></div>
      	<div class="windowR"></div>
     	  <div class="windowR"></div>
     	  <div class="windowR"></div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你想要它看起来像这样吗？

因此，我们可以使用公共类window将窗口浮动到建筑物内，并设置margin-left和margin-bottom以使窗口对齐！

＆＃13;

＆＃13;

.building {
  width: 100px;
  height: 200px;
  margin: auto;
  background-color: #843533;
  border-style: solid;
  box-shadow: 2px 2px black;
  padding: 10px;
}

.building .windowL{
	width: 40px;
	height: 40px;
	background-color: #8e8383;
	margin-bottom: 10px;
  float:left;
  margin-left:7px;
	
}
.building .windowR{
	width: 40px;
	height: 40px;
	background-color: #8e8383;
	margin-bottom: 10px;
  float:left;
  margin-left:7px;
}

＆＃13;

<div class="building">
  <div class="windowL"></div>
  <div class="windowR"></div>
  <div class="windowL"></div>
  <div class="windowR"></div>
  <div class="windowL"></div>
  <div class="windowR"></div>
  <div class="windowL"></div>
  <div class="windowR"></div>
</div>

＆＃13;

＆＃13;

＆＃13;