フローティングイメージの相対位置が同じでない

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>

出典

2016-07-07 Renzo

削除しますか？

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>

出典

2016-07-07 05:05:25 LGSon

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

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

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

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

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

出典

2016-07-07 04:57:17 vignesh

を.logoあなたに

text-align: center; margin: auto;

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

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

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

display: inline-table
http://flexboxgrid.com/
物を見つけて修正しやすくする

出典

2016-07-07 05:13:08 Metalshark

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

出典

2016-07-07 05:15:05 PJ1815

フローティングイメージの相対位置が同じでない

答えて

関連する問題