这对于从左到右的布局更好：float或display：inline？ [英] Which is better for left-to-right layout: float or display:inline?

问题描述

我在div中有一些图标，需要使用从左到右的结构，而不是默认的从上到下的布局，它似乎配备了div。这可能不是大多数人谁知道CSS的消息，但我想出了（与一点帮助），我可以使用以下方式从左到右布局div：

I have some icons inside divs and needed to lay them out with a left-to-right structure instead of the default top-to-bottom layout that seems to come with divs. It's probably not news to most people who know CSS but I figured out (with a little help) that I could cause the divs to layout left-to-right using either:

float: left/right 

$ b b

或

or

display:inline. 

我的问题是 - 比其他更受欢迎？

My question is - is one preferable over the other?

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

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

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

推荐答案

/ height on inline元素，所以如果他们必须是一个特定的大小，那么你会坚持浮动他们。浮动元素可能会导致各种布局怪癖，因此如果您不浮动内容，则内联是绝对首选。

You cannot set an explicit width/height on inline elements, so if they must be a specific size then you're stuck with floating them. Floating elements can cause various layout quirks, so inline is definitely preferred if you don't have to float things.

在这里，您应该能够设置图像上的大小而不是div。然后你可以将divs改为跨度，这自然会扩展到内部的图像的大小。 （跨度只是div的内联伴随，不需要创建div，然后强制它们 display：inline 。）

Here, you should be able to set the size on the images instead of the divs. Then you could change the divs to spans which would naturally expand to the size of the images inside. (A span is just the inline companion to div, no need to create divs and then force them to display: inline.)

这篇关于这对于从左到右的布局更好：float或display：inline？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！