要素がラインナップ

Question

は私がいないラインナップは、これらの3つの<div>は（画像は縮小される）ことができません。

HTML：

<div id="container"> 
     <div id="position"> 
      <div id="content"> 
       <div id="logo"> 
       <div class="ref1"> 
        <img src="ref/b_bi.png" /> 
       </div> 
       <div class="ref2"> 
        <img src="ref/b_mg.png" /> 
       </div> 
       <div class="ref3"> 
        <img src="ref/b_sl.png" /> 
       </div>      
       </div> 

      </div> 
     </div> 
    </div> 

CSS：

#logo 
{ 
    width: 100%; 
    height: 400px; 
    margin-left: 0; 
    background-image: url(logo.png); 
    background-position: left center; 
    background-repeat: no-repeat; 
    background-color: rgba(255,255,255,0.5); 

} 
.ref1 
{ 
    width:250px; 
    height: 400px; 
    margin-left:300px; 
    background-color: rgba(0,0,0,0.3); 
} 
.ref2 
{ 
    width:250px; 
    height: 400px; 
    margin-left: 550px; 
    background-color: rgba(0,0,0,0.3); 
} 
.ref3 
{ 
    width:250px; 
    height: 400px; 
    margin-left: 800px; 
    background-color: rgba(0,0,0,0.3); 

} 
#container 
{ 
    display: table; 
    width: 100%; 
    height: 95%; 
} 
#position 
{ 
    display: table-cell; 
    vertical-align: middle; 
    padding-top: 4%; 
} 
#content { } 

Answer 1

これは？

#logo 
{ 
    width: 100%; 
    height: 400px; 
    margin-left: 0; 
    background-image: url(logo.png); 
    background-position: left center; 
    background-repeat: no-repeat; 
    background-color: rgba(255,255,255,0.5); 

} 
.ref1, .ref2, .ref3 
{ 
    width:250px; 
    height: 400px; 
    float: left; 
    background-color: rgba(0,0,0,0.3); 
} 
#container 
{ 
    display: table; 
    width: 100%; 
    height: 95%; 
} 
#position 
{ 
    display: table-cell; 
    vertical-align: middle; 
    padding-top: 4%; 
} 
#content { } 

Answer 2

私はあなたがワンと仮定していますDIVが並んで表示されませんか？もしそうなら、これらのDIVに "float：left"というスタイルを追加する必要があります（余白を取り除きます）。

Answer 3

問題は、余白が残っているか、場合によってはクラスの幅です。 margin-leftを.ref2と.ref3に削除し、float:leftを追加すると、あなたがしたいことをするべき3つのクラスすべてに。また、幅3をすべて削除するか、減らす必要があるかもしれません。

これは私が最初にお勧めする変更です。あなたが望むように整列すれば、それを使いこなすことができます。

.ref1 
{ 
    width:250px; 
    height: 400px; 
    margin-left:300px; 
    float:left; 
    background-color: rgba(0,0,0,0.3); 
} 
.ref2 
{ 
    width:250px; 
    height: 400px; 
    /*margin-left: 550px;*/ 
    float:left; 
    background-color: rgba(0,0,0,0.3); 
} 
.ref3 
{ 
    width:250px; 
    height: 400px; 
    /*margin-left: 800px;*/ 
    float:left; 
    background-color: rgba(0,0,0,0.3); 

}