1. 首页
  2. 问答
  3. 如何在div内均匀分布元素？

如何在div内均匀分布元素？

2014-10-04 186 views
5

我要均匀，放置流体几个要素另一个DIV中的嘲笑如下：如何在div内均匀分布元素？

enter image description here

enter image description here

enter image description here

我一直在使用的text-align看到的伎俩：作为辩护在（https://stackoverflow.com/a/6880421/2159250）中给出，但给出一个或两个元素，它被置于（正确）在右侧/左侧，如下所示:(这不是我正在寻找的）。

enter image description here

任何帮助将不胜感激。

来源

2014-10-04 Aymer

+0

，如果你并不需要支持旧的浏览器，它是worty给你看一个Flexbox的：从http://css-tricks.com/snippets/css/a-启动指南到flexbox /和https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes – 2014-10-04 10:59:26

+0

是的，没关系<= ie8 – Aymer 2014-10-04 11:33:42

回答

1

左对齐的内容是这样的（一个或多个点代表空白）：

+----------------------------------------------+ 
|word.word.word.word       | 
+----------------------------------------------+

（1）text-align: justify不能证明最后（或唯一）行*。一个简单的解决办法是增加一个很长字只能适合在自己的行：

+----------------------------------------------+ 
|word..........word..........word..........word| 
|longword_longword_longword_longword_longword_l| 
+----------------------------------------------+

（2）你想之前的第一和最后一个单词后的空白。一个简单的解决方案是，以产生以下结果添加虚设词：

+----------------------------------------------+ 
|dummy....word....word....word....word....dummy| 
|longword_longword_longword_longword_longword_l| 
+----------------------------------------------+

期望的结果可以通过添加额外的标记来实现。例如：

.row { 
 
    text-align: justify; 
 
} 
 
.row:after { 
 
    display: inline-block; 
 
    content: ""; 
 
    width: 100%; 
 
} 
 
.box { 
 
    display: inline-block; 
 
} 
 
.dummy { 
 
    display: inline-block; 
 
} 
 
/**** FOR TESTING ****/ 
 
.row { 
 
    margin: 1em 0; 
 
    background: #FC0; 
 
} 
 
.box { 
 
    background: #F0C; 
 
    width: 4em; 
 
    height: 5em; 
 
} 
 
.box:nth-child(even) { 
 
    background: #0CF; 
 
    width: 8em; 
 
}
<div class="row"> 
 
    <div class="dummy"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="dummy"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="dummy"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="dummy"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="dummy"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="dummy"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="dummy"></div> 
 
    <div class="box"></div> 
 
    <div class="dummy"></div> 
 
</div>

* text-align-last财产可能在未来

来源

2014-10-04 14:55:15

+0

谢谢，它工作。只需要注意一下：在虚拟div之后有空格或换行符是非常重要的（我花了几个小时才弄清楚了。 – Aymer 2014-10-05 07:41:32

0

DEMO

ul { 
    margin: 0 auto; 
    width:100%; 
    list-style: none; 
    position:relative; 
    text-align: center; 
    vertical-align: middle; 
} 


ul li { 
    width: 218px; 
    height: 218px; 
    display: inline-block; 
    background:#ccc; 
    margin: 40px; 
    border: 1px solid #d9d9d9; 
    box-shadow: 1px 1px 1px #f2f2f2; 
    position: relative; 
    padding:0px; 
    overflow:hidden; 

}

来源

2014-10-04 10:57:16 himanshu

+1

并非所有的事情本身都不会;你能完成你的答案，并指定所需的样式，在父元素？即使如此，正如问题所确定的那样，它并不一定是完美分布的。 – 2014-10-04 11:29:33

+0

好吧，让我创建一个小提琴 – himanshu 2014-10-04 11:32:20

0

试试这个代码

<html> 
    <head> 
     <title>my page</title> 
     <style type="text/css"> 
      .new{width: 500px; height: 200px; border: 1px solid #333; text-align: center; display: table-cell; vertical-align: middle;} 
      .new div{width: 100px; height: 100px; border: 1px solid #300; display: inline-block;} 
     </style> 
    </head> 
    <body> 
     <div class="new"> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
     </div> 
    </body> 
</html>

来源

2014-10-04 11:11:15 user3074446

+0

不幸的是，这不会均匀分配元素。这些元素之间的边际需要相同。 – Aymer 2014-10-04 13:09:21

0

你正在服用此text-align:justify;错误。实际上有理由和display: inline;之间的区别。如果你看到答案被接受者的代码，那么你会发现他已经使用了两个东西，即text-align: justify和display: inline作为不同元素的属性和用于不同的目的。

，他已经用容器的text-align:justify;财产告诉容器有它的内容之间的适当间距和他已经习惯display:inline;所有盒ES的财产，责令其线路安排的地方

如果你只会用display:inline那么它只会在一条线上显示出来，而无需关心适当的间距，但如果你定义text-align:justify;然后ITT会去在意适当的间距或者我应该说等于填充从容器的边框

看起来这个家伙的代码之间的差异......实际上他已经添加了很多css来制作更具吸引力，但我已经删除了所有东西只是解释你：

code没有text-align:justify;：

#container { 
    border: 2px dashed #444; 
    height: 125px; 



    /* just for demo */ 
    min-width: 612px; 
} 

.box1, .box2, .box3, .box4 { 
    width: 150px; 
    height: 125px; 
    vertical-align: top; 
    display: inline-block; 

}

code与text-align:justify;

#container { 
    border: 2px dashed #444; 
    height: 125px; 
    text-align: justify; 


    /* just for demo */ 
    min-width: 612px; 
} 

.box1, .box2, .box3, .box4 { 
    width: 150px; 
    height: 125px; 
    vertical-align: top; 
    display: inline-block; 

}

来源

2014-10-04 11:57:30 anni

+0

并与此我希望你现在能够明白你不明白什么.... – anni 2014-10-04 12:06:40

+0

嘿，谢谢你的观点，但尝试与两个或一个元素。它将它们置于极右/左侧，而不是我期望的。我提到边缘b/w元素和（边缘b/w边界和元素）应该是相同的。 – Aymer 2014-10-04 13:27:32

1

此使用应该是你在找什么。它需要你将行元素包装在“虚拟”div中，但这应该没问题。

.row { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    margin-bottom: 10px; 
 
} 
 
.element-wrapper { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.element { 
 
    width: 80%; 
 
    height: 100px; 
 
    margin: auto; 
 
    background: #ccc; 
 
}
<div class="row"> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Toto</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Titi</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Tata</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Tete</div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Toto</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Titi</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Tata</div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Toto</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Titi</div> 
 
    </div> 
 
</div>

来源

2014-10-04 18:30:32

相关问题

 相关问题