浮動圖像在相對位置上的高度不同
[英]Floating images are not at the same height on relative position
問題描述
我需要在div下面分組的一組圖標顯示在我的徽標右側（位於左上角）。 我需要徽標和所有圖標都有相對位置。 我使用float:left為兩個div，但第二個div（圖標組）出現在徽標下方而不是右側。 我也嘗試在無序列表下對它們進行分組，輸入style="float:left"作為HTML，但它也不起作用。
這是CSS：
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; }
<body> <div class="container"> <div id="parent"> <div class="logo"> <img src="http://placehold.it/77" width="27%" height="27%"> </div> <div id="icons" style="float:left" class="all-icons"> <img src="http://placehold.it/77" width="389" height="317"> <img src="http://placehold.it/77" width="451" height="317"> <img src="http://placehold.it/77" width="427" height="317"> <img src="http://placehold.it/77" width="837" height="317"> <img src="http://placehold.it/77" width="594" height="317"> </div> </div> </div> </body>
4 個解決方案
解決方案1
1 已采納 2016-07-07 05:05:25
這是你要找的？
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>
解決方案2
0 2016-07-07 04:57:17
添加#icons { text-align: right; } #icons { text-align: right; } ，我認為這會對你有所幫助。
請刪除#parent { display: flex;}並刪除#icons { width: 100% }
解決方案3
0 2016-07-07 05:13:08
它看起來與我一致（見下圖）但是邊距/填充使它看起來像是在下面和右邊。
在看過你的代碼后可能有用的其他事情：
-
display: inline-table - http://flexboxgrid.com/
- 記住保持CSS文件盡可能小，盡可能不全面，以便於查找和修復
解決方案4
0 2016-07-07 05:15:05
您的徽標類圖像不在其父級的中心。 加
text-align: center; margin: auto;
進入你的.logo課程
位置：相對和浮動元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.