浮动图像在相对位置上的高度不同
[英]Floating images are not at the same height on relative position
问题描述
I need a set of icons grouped under a div to appear to the right of my logo (which is located on the top-left corner). 
我需要在div下面分组的一组图标显示在我的徽标右侧（位于左上角）。 I need the logo and all icons to have a position of relative. 我需要徽标和所有图标都有相对位置。 I am using float:left for both divs, but the second div (the group of icons) appears below the logo and not to its right. 我使用float:left为两个div，但第二个div（图标组）出现在徽标下方而不是右侧。 I have also tried grouping them under an unordered list and input style="float:left" as HTML, but it does not work either. 我也尝试在无序列表下对它们进行分组，输入style="float:left"作为HTML，但它也不起作用。
Here is the CSS: 这是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
Is this what you look for? 这是你要找的？
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>
If you can't use flex , try display: table 如果您不能使用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
Add #icons { text-align: right; } 添加#icons { text-align: right; } #icons { text-align: right; } , i think this will help you. #icons { text-align: right; } ，我认为这会对你有所帮助。
please do remove #parent { display: flex;} and also remove #icons { width: 100% } 请删除#parent { display: flex;}并删除#icons { width: 100% }
解决方案3
0 2016-07-07 05:13:08
It looks in line to me (see below image) however the margins/padding make it look like it's below and to the right. 它看起来与我一致（见下图）但是边距/填充使它看起来像是在下面和右边。
Other things which may prove useful having seen your code: 在看过你的代码后可能有用的其他事情：
-
display: inline-table - http://flexboxgrid.com/ http://flexboxgrid.com/
- remembering to keep CSS files as small as possible, not as comprehensive as possible to make it easy to find and fix things 记住保持CSS文件尽可能小，尽可能不全面，以便于查找和修复
解决方案4
0 2016-07-07 05:15:05
Your image of logo class not in center of its parent. 您的徽标类图像不在其父级的中心。 Add 加
text-align: center; margin: auto;
into you .logo class 进入你的.logo课程
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.