1. 首頁
  2. 問答
  3. 如何在div內均勻分佈元素？

如何在div內均勻分佈元素？

2014-10-04 46 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

相關問題

 相關問題