2016-07-07 8 views
3

divの下にグループ化された一連のアイコンが、ロゴの右上に表示される必要があります(左上隅にあります)。私はロゴとすべてのアイコンが相対的な位置を持つ必要があります。両方のdivにfloat:leftを使用していますが、2番目のdiv(アイコンのグループ)はロゴの下に表示され、右には表示されません。私はまた、順序付けされていないリストの下でそれらをグループ化し、style="float:left"をhtmlとして入力しようとしましたが、どちらも機能しません。フローティングイメージの相対位置が同じでない

div.container { 
width: 1111px; 
} 

#parent { 
display: flex; 
} 

.logo { 
float:left; 
position: relative; 
top:0px; 
margin-left: 0px; 
} 

#icons { 
position:relative; 
float: left;  
white-space: nowrap; 
width: 100%; 
display: table; 
max-width: 100%; 
} 

.all-icons { 
position: relative; 
float: left; 
vertical-align: middle; 
padding: 15px; 
display: table-cell; 
} 

.all-icons img { 
height:auto; 
width: auto; 
max-height: 77px; 
max-width: 100%; 
margin: 15px; 
} 

そしてHTML::ここで

はCSSで

<body> <div class="container"> 

<div id="parent"> 

<div class="logo"> <img src="../Header/Logo-vector.png" width="27%" height="27%"> </div> 

<div id="icons" style="float:left" class="all-icons"> 

<img src="../Header/icons/icon1.png" width="389" height="317"> 

<img src="../Header/icons/icon2.png" width="451" height="317"> 

<img src="../Header/icons/icon3.png" width="427" height="317"> 

<img src="../Header/icons/icon4.png" width="837" height="317"> 

<img src="../Header/icons/icon5.png" width="594" height="317"> 

</div> 

</div> 
</div> 

</body> 

答えて

1

削除しますか?

div.container { 
 
    /* width: 1111px; */ 
 
} 
 
#parent { 
 
    display: flex; 
 
} 
 
.logo img { 
 
    margin: 15px; 
 
} 
 
.all-icons { 
 
    white-space: nowrap; 
 
} 
 
.all-icons img { 
 
    margin: 15px; 
 
}
<div class="container"> 
 

 
    <div id="parent"> 
 

 
    <div class="logo"> 
 
     <img src="http://placehold.it/77/f00" alt=""> 
 
    </div> 
 

 
    <div id="icons" class="all-icons"> 
 
     
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 

 
    </div> 
 

 
    </div> 
 
</div>

あなたはflexを使用できない場合は、しかし、余白(画像下記参照)それは私にラインに見えますdisplay: table

div.container { 
 
    /* width: 1111px; */ 
 
} 
 
#parent { 
 
    display: table; 
 
} 
 
.logo { 
 
    display: table-cell; 
 
} 
 
.all-icons { 
 
    display: table-cell; 
 
} 
 
.logo img { 
 
    margin: 15px; 
 
} 
 
.all-icons { 
 
    white-space: nowrap; 
 
} 
 
.all-icons img { 
 
    margin: 15px; 
 
}
<div class="container"> 
 

 
    <div id="parent"> 
 

 
    <div class="logo"> 
 
     <img src="http://placehold.it/77/f00" alt=""> 
 
    </div> 
 

 
    <div id="icons" class="all-icons"> 
 
     
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 

 
    </div> 
 

 
    </div> 
 
</div>

+0

私は赤いボックスの右側に灰色のボックスを直接取得しようとしています。 – Renzo

+0

@Renzo間に空白がない? – LGSon

+0

すべての要素の間には、マージンはありません。 @LGSon – Renzo

0

#icons { text-align: right; }を追加し、私は、これはあなたを助けると思います。

#parent { display: flex;}を削除するようにしてくださいともあなたが何を見て、これは#icons { width: 100% }

+0

を.logoあなたに

text-align: center; margin: auto;

を追加これは、ページの右側にあるアイコンを整列、彼らはまだロゴの下に置かれ、それによって、右されていません。 – Renzo

0

を試してみてください/ paddingは右下のように見えます。有用であることを証明し得る

Margins and Padding

他の事はあなたのコードを見た:

  • display: inline-table
  • に、可能な限り小さくできるだけではないとして包括的にCSSファイルを保つために覚えて
  • http://flexboxgrid.com/
  • 物を見つけて修正しやすくする
0

ロゴクラスのイメージは、親の中心にはありません。クラス

関連する問題