为什么我的图标从上到下排列而不是在DIV布局中从左向右流动？

I have these 3 icons enclosed in separate DIVs all of which are enclosed within a single DIV:

我将这3个图标包含在单独的DIV中,所有这些都包含在一个DIV中:

<div id="icons">

  <div id="divtxt" class="divicon">
    <img src="/icons/text.png" id="icontxt" class="icon"/>
  </div>

  <div id="divpdf" class="divicon">
    <img src="/icons/pdf.png" id="icondoc" class="icon"/>
  </div>

  <div id="divrtf" class="divicon">
    <img src="/icons/rtf.png" id="iconrtf" class="icon"/>
  </div>
</div>

I set some simple styles but can't figure out why these images are lining up top-to-bottom instead of left-to-right:

我设置了一些简单的样式,但无法弄清楚为什么这些图像从上到下而不是从左到右排列:

  div#icons
  {
    width:200px;
    height: 100px;
  }

  div.divicon
  {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0 0 0 0;
  }

Any suggestions would be appreciated.

任何建议,将不胜感激。

3 个解决方案

#1

And now for something a bit more comprehensive:

而现在更全面的东西:

You look like you just want a row of icons. Using your HTML, you would need to float the divs containing the icons in order for them to be next to each other. The reason why you need to float is because a div is a block level element (as opposed to inline) which means that nothing can exist in the horizontal space next to it.

你看起来只想要一排图标。使用HTML,您需要浮动包含图标的div,以使它们彼此相邻。你需要浮动的原因是因为div是块级元素(而不是内联),这意味着它旁边的水平空间中不存在任何东西。

You can achieve this effect by adding a float: left; rule to div.divicon

你可以通过添加一个浮点数来实现这个效果:left;规则到div.divicon

Floating does two things: it takes the block element out of the page flow allowing other elements to exist next to it (or flow around it) and it reduces the width of the box to fit the content. As far as the parent is concerned, a floated element has no height. To illustrate this, just try giving #icons a background color or border. You will notice that it won't show up - or show up as a 1px line.

浮动做了两件事:它将块元素从页面流中移出,允许其他元素存在于其旁边(或围绕它流动),并且它减小了框的宽度以适合内容。就父母而言,浮动元素没有高度。为了说明这一点,只需尝试给#icons一个背景颜色或边框。您会注意到它不会显示 - 或显示为1px行。

In order for the parent to recognise the height of the floated element you need to tell the parent that overflow should be hidden with this rule:

为了让父级能够识别浮动元素的高度,您需要告诉父级应该使用以下规则隐藏溢出:

#icons { overflow:hidden; }

This also works in IE however not always, so sometimes you might need to set a height or width or do a zoom:1 which tends to fix a lot of IE bugs (look up "hasLayout bug" if you want more info).

这也适用于IE但不总是这样,所以有时您可能需要设置高度或宽度或进行缩放:1这往往会修复很多IE错误(如果您想了解更多信息,请查找“hasLayout bug”)。

Now for a different solution:

现在寻求不同的解决方案:

You look like you just want a row of icons. Unless theres a reason for the images to be surrounded in a div (and in your example there is none) I would suggest to you to do something like this:

你看起来只想要一排图标。除非图像被div包围(并且在你的例子中没有),我建议你做这样的事情:

<div id="icons">
    <img src="/icons/text.png" id="icontxt" />
    <img src="/icons/pdf.png" id="icondoc" />
    <img src="/icons/rtf.png" id="iconrtf" />
</div>

#icons { /* rules for our container go here */ margin:0; padding:0; /* etc... */ }
#icons img { /* rules for your icons */ border:none; margin:0 2px; /* etc... */ }

I have removed the redundant divs and the redundant class attribute on the images. Since images are inline elements you wont need to screw around with floats and you wont have any extra divs that may cause divitis a degenerative HTML disease that affects many websites and spreads through bad advice. Remember, only use what you need - don't use it just because its there.

我删除了图像上的冗余div和冗余类属性。由于图像是内联元素,你不需要用浮动螺旋,你不会有任何额外的div可能导致divitis退化的HTML疾病,影响许多网站,并通过不良建议传播。请记住,只使用您需要的东西 - 不要因为它在那里使用它。

Hope this helps,

希望这可以帮助,

Darko

#2

You need a

你需要一个

float: left;

in your div#icons.

在你的div#图标。

#3

div is a block level element. So the default behavior is to layout one below the other, unless you float them like Robert suggested.

div是块级元素。所以默认行为是将一个布局放在另一个之下,除非你像罗伯特建议的那样浮动它们。

#1