-2

我想像图片上那样排列div，但我不知道如何。

也许填充可以设置自动？

列出的类别

谁能帮我？

4

7 回答 7

1 
<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>
于 2012-09-12T09:03:52.477 回答
1

一种可能有助于w3c FlexBox 模型规范的不同方法......但如果没有关于您的场景的更多细节，很难说。

于 2012-09-10T12:19:51.907 回答
1

您可以尝试使用 inline-block 执行此操作。可能是这类事情的最佳方法，但在较低版本的 IE 中并不普遍支持。

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

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

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

于 2012-09-10T12:53:05.347 回答
0

谢谢！这适用于 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;

}
于 2012-09-10T13:56:26.763 回答
0

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

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

于 2012-09-10T12:25:10.103 回答
0

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

我建议从 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
于 2012-09-10T12:29:28.023 回答
0

您应该尝试更好的方法并从那里开始工作：

ul{
  text-align:justify;
}
ul li{
  display:inline;
  padding:10px;
  margin:10px;
  line-height:60px;
  background-color:orange;
  white-space:nowrap;
}
于 2012-09-10T12:47:32.197 回答