为什么我的图标从上到下排列，而不是在DIV布局中从左到右流动？ [英] Why do my icons line up top-to-bottom instead of flowing left-to-right in a DIV layout?

问题描述

 < div id =icons> 
 
< div id =divtxtclass =divicon> 
< img src =/ icons / text.pngid =icontxtclass =icon/> 
< / div> 
 
< div id =divpdfclass =divicon> 
< img src =/ icons / pdf.pngid =icondocclass =icon/> 
< / div> 
 
< div id =divrtfclass =divicon> 
< img src =/ icons / rtf.pngid =iconrtfclass =icon/> 
< / div> 
< / div> 
  

我设置了一些简单的样式，但无法弄清楚为什么这些图像排列在顶部 - 底部而不是从左到右：

  div＃icons 
 {
 width：200px; 
 height：100px; 
} 
 
 div.divicon 
 {
 margin：0 0 0 0; 
 padding：0 0 0 0; 
 border：0 0 0 0; 
} 
  

任何建议都不胜感激。

解决方案

现在对于更全面的东西：

你看起来像只是想要一排图标。使用HTML，您需要 float 包含图标的div，才能使它们彼此相邻。你需要浮动的原因是因为一个div是一个块级元素（而不是内联），这意味着在它旁边的水平空间中不能存在。

您可以通过向 div.divicon

$ b添加 float：left;
$ b

浮动有两件事：它需要块元素离开页面流，允许其他元素存在于它的旁边（或在它周围流动），它减少了框的宽度以适合内容。就父母而言，浮动元素没有高度。为了说明这一点，只需尝试给予 #icons 背景颜色或边框。你会注意到它不会显示 - 或显示为1px行。

为了让父级识别浮动元素的高度，您需要告诉父级应该使用此规则隐藏溢出：

  #icons {overflow：hidden; } 
  

这也适用于IE但不总是，所以有时你可能需要设置高度或宽度或者做一个 zoom：1 ，这往往修复很多IE错误（查找hasLayout错误如果你想要更多的信息）。

现在有一个不同的解决方案：

你看起来像只是想要一排图标。除非这是图像被包围在一个div（在你的例子中没有）的原因，我建议你这样做：

 < div id =icons> 
< img src =/ icons / text.pngid =icontxt/> 
< img src =/ icons / pdf.pngid =icondoc/> 
< img src =/ icons / rtf.pngid =iconrtf/> 
< / div> 
 
 #icons {/ *我们的容器的规则去这里* / margin：0; padding：0; / * etc ... * /} 
 #icons img {/ *您的图标的规则* / border：none; margin：0 2px; / * etc ... * /} 
  

我删除了冗余的div和冗余类属性图像。由于图像是内联元素，你不需要拧上浮动，你不会有任何额外的div，可能会导致 divitis 退化的HTML疾病，影响很多网站和传播通过不好的建议。

希望这会有帮助，

Darko

I have these 3 icons enclosed in separate DIVs all of which are enclosed within a single 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.

解决方案

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.

You can achieve this effect by adding a float: left; rule to 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.

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).

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 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.

Hope this helps,

Darko

这篇关于为什么我的图标从上到下排列，而不是在DIV布局中从左到右流动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！