divクラスの2つのグループのグループ

Question

私はクラスのこの2つのグループを並べて設定しようとしましたが、私はできませんでした.. 私はディスプレイを使用しようとしました：flex、float：leftおよび他のCSS属性ここではうまくいきませんでした。

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

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

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

Answer 1

あなたはそれが次のようになりたいですか？

したがって、建物内のウィンドウを共通のクラスwindowでフロートし、ウィンドウを整列させるためにmargin-leftとmargin-bottomを設定することができます。

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

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

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