Question

我需要在div下面分组的一组图标显示在我的徽标右侧（位于左上角）。我需要徽标和所有图标都有相对位置。我对两个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>

Answer 1

这是你要找的吗？

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>

Answer 2

添加#icons { text-align: right; }，我认为这会对您有所帮助。

请删除#parent { display: flex;}并删除#icons { width: 100% }

Answer 3

它符合我的要求（见下图）但是边距/填充使它看起来像是在它下方和右边。

看过你的代码后可能证明有用的其他事情：

display: inline-table
http://flexboxgrid.com/
记住保持CSS文件尽可能小，尽可能不全面，以便于查找和修复内容

Answer 4

徽标类的图像不在其父级的中心。添加

text-align: center; margin: auto;

进入你.logo class

浮动图像在相对位置上的高度不同

4 个答案: