Плавающие изображения не находятся на одинаковой высоте в относительном положении

Мне нужен набор значков, сгруппированных под div, справа от моего логотипа (который находится в верхнем левом углу). Мне нужен логотип и все значки, чтобы иметь положение родственника. Я использую float:left для обоих 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; 
}

И HTML:

<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

Это выравнивает иконки в правой части страницы, но они по-прежнему находится под логотипом, а не прямо на него. – Renzo

Он выглядит в линии для меня (см рисунок ниже), однако рентабельность/padding, это выглядит так, как показано ниже и справа.

Другие вещи, которые могут оказаться полезными, увидев код:

display: inline-table
http://flexboxgrid.com/
вспомнить, чтобы сохранить CSS файлы как можно меньше, не столь всеобъемлющим, как можно облегчают поиск и исправление вещей

источник

2016-07-07 05:13:08 Metalshark

Ваше изображение класса логотипа не находится в центре его родителя. Добавить

text-align: center; margin: auto;

в вас .logo класс

источник

2016-07-07 05:15:05 PJ1815

Плавающие изображения не находятся на одинаковой высоте в относительном положении

ответ

Смежные вопросы