Question

我想在图片上安排div，但我不知道怎么做。

也许填充可以设置自动？

category listed

任何人都可以帮助我吗？

Answer 1

一种可能有助于w3c FlexBox model spec的不同方法......但如果没有关于您的方案的更多细节，很难说。

Answer 2

您可以尝试使用内联块执行此操作。可能是此类事物的最佳方法，但在较低版本的IE中并非普遍支持。

JSFiddle示例：http://jsfiddle.net/NdK7c/

仅供参考：您可以通过将正letter-spacing添加到父UL元素，然后在子li元素上添加letter-spacing: normal来纠正继承的字母间距来创建每个元素之间的间距。

更新了小提琴：http://jsfiddle.net/2suGg/1/

Answer 3

<style type="text/css">
           .main-container{
               width:400px; 
               background: #007caa;
               display: block
           }
            .block{ 
                display: block; 
                display: inline-block;
                width:auto;
                margin:5px; 
                background: #dbf2fa;
                padding: 10px;
            }
            *+html .block{
                display: inline
            }
        </style>
        
      </head>
      
      <body>
          <div class="main-container">
              <div class="block">Development</div>
              <div class="block">Designing</div>
              <div class="block">Drupal</div>
              <div class="block">Omega</div>
              <div class="block">Drupal</div>
              <div class="block">Designing</div>
              <div class="block">Development</div>
              <div class="block">Drupal</div>
              <div class="block">Omega</div>
              <div class="block">Development</div>
              <div class="block">Drupal</div>
              <div class="block">Omega</div>
    
          </div>

Answer 4

我们可以使用CSS'display'和'float'样式来安排像你提到的图像一样的div。如果使用float样式意味着我们必须清除最后一个float div末尾的float。

请参阅链接http://jsfiddle.net/ybhR9/2/了解样式“显示”概念。

Answer 5

我假设您正在尝试实现对齐（在左侧和右侧对齐）。

我建议从Javascript中分配边距，然后让div内联。不需要漂浮。

算法：

- Whenever the container is resized
-- Create a copy of the container such that it is not user-visible but still layouted by the browser
-- Set all element margins to zero
-- Collect the elements by rows
-- For each row (except the last one, maybe)
--- Calculate the largest element margin that will not cause an overflow
--- Round down to whole pixels
--- Determine the deficit due to rounding
--- Set each element the margin, and distribute the deficit (one pixel to each)
-- Force the browser to recalculate the layout
-- Replace the container with the new one

Answer 6

你应该尝试更好的东西并从那里开始工作：

ul{
  text-align:justify;
}
ul li{
  display:inline;
  padding:10px;
  margin:10px;
  line-height:60px;
  background-color:orange;
  white-space:nowrap;
}

Answer 7

谢谢！这适用于IE但不适用于Chrome .. :(

.enlarge-categores  ul{
    text-align: justify;
    text-justify:distribute;


}
.enlarge-categores ul li{
    color: white;
    font-size: 14px; 
    display:inline;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 60px;
    margin:10px;
    background-color:#f39900;

}

如何安排像这样的div

7 个答案: