我要均勻,放置流體幾個要素另一個DIV中的嘲笑如下:如何在div內均勻分佈元素?
我一直在使用的text-align看到的伎倆:作爲辯護在(https://stackoverflow.com/a/6880421/2159250)中給出,但給出一個或兩個元素,它被置於(正確)在右側/左側,如下所示:(這不是我正在尋找的)。
任何幫助將不勝感激。
我要均勻,放置流體幾個要素另一個DIV中的嘲笑如下:如何在div內均勻分佈元素?
我一直在使用的text-align看到的伎倆:作爲辯護在(https://stackoverflow.com/a/6880421/2159250)中給出,但給出一個或兩個元素,它被置於(正確)在右側/左側,如下所示:(這不是我正在尋找的)。
任何幫助將不勝感激。
左對齊的內容是這樣的(一個或多個點代表空白):
+----------------------------------------------+
|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
財產可能在未來
謝謝,它工作。只需要注意一下:在虛擬div之後有空格或換行符是非常重要的(我花了幾個小時才弄清楚了。 – Aymer 2014-10-05 07:41:32
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 11:29:33
好吧,讓我創建一個小提琴 – himanshu 2014-10-04 11:32:20
試試這個代碼
<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>
不幸的是,這不會均勻分配元素。這些元素之間的邊際需要相同。 – Aymer 2014-10-04 13:09:21
你正在服用此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;
}
此使用應該是你在找什麼。它需要你將行元素包裝在「虛擬」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>
,如果你並不需要支持舊的瀏覽器,它是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
是的,沒關係<= ie8 – Aymer 2014-10-04 11:33:42