gpt4 book ai didi

html - float 图像在相对位置上不在同一高度

转载 作者:可可西里 更新时间:2023-11-01 13:48:36 24 4
gpt4 key购买 nike

我需要一组在 div 下分组的图标,以显示在我的 Logo 右侧(位于左上角)。我需要 Logo 和所有图标都具有相对位置。我对两个 div 使用 float:left,但第二个 div(图标组)出现在 Logo 下方而不是右侧。我也试过将它们分组在一个无序列表下并输入 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>

最佳答案

这是你要找的吗?

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>

关于html - float 图像在相对位置上不在同一高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38237757/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com