Floating images are not at the same height on relative position
Question
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). 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. I have also tried grouping them under an unordered list and input style="float:left" as HTML, but it does not work either.
Here is the 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 answers
solution1
1 ACCPTED 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
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>
solution2
0 2016-07-07 04:57:17
Add #icons { text-align: right; } #icons { text-align: right; } , i think this will help you.
please do remove #parent { display: flex;} and also remove #icons { width: 100% }
solution3
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/
- remembering to keep CSS files as small as possible, not as comprehensive as possible to make it easy to find and fix things
solution4
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.