tôi phải đặt vài yếu tố đồng đều và trôi chảy bên trong div khác như chế giễu dưới đây:Làm thế nào để phân phối các phần tử đồng đều bên trong một div?
Tôi đã nhìn thấy các trick sử dụng text-align: justify như đưa ra trong (https://stackoverflow.com/a/6880421/2159250), nhưng đưa ra một hoặc hai yếu tố, nó nhận được đặt (hợp lý) ở bên phải/bên trái như đưa ra dưới đây: (đó không phải là những gì tôi đang tìm kiếm).
Mọi trợ giúp sẽ được đánh giá cao.
Left nội dung liên kết trông như thế này (một hoặc nhiều dấu chấm đại diện cho khoảng trắng):
+----------------------------------------------+
|word.word.word.word |
+----------------------------------------------+
(1)text-align: justify không biện minh cho dòng cuối cùng (hoặc chỉ) *. Một giải pháp đơn giản là thêm một rất dài từ đó chỉ có thể phù hợp trên một dòng riêng của mình:
+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+
(2) Bạn muốn khoảng trắng trước khi là người đầu tiên và sau từ cuối cùng.Một giải pháp đơn giản là thêm giả lời để sản xuất các kết quả sau:
+----------------------------------------------+
|dummy....word....word....word....word....dummy|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+
Các kết quả mong muốn có thể đạt được bằng cách thêm đánh dấu bổ sung. Ví dụ:
.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 tài sản có thể được sử dụng trong tương lai
Cảm ơn, nó đã hoạt động. Chỉ cần lưu ý: điều quan trọng là có không gian hoặc dòng mới sau div giả (nó đã cho tôi vài giờ để tìm ra điều đó. – Aymer
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;
}
Không phải tất cả chính nó sẽ không; bạn có thể hoàn thành câu trả lời của mình và chỉ định kiểu dáng bắt buộc, trên phần tử gốc không? Và thậm chí sau đó, như được xác định trong câu hỏi, nó không nhất thiết phải phân phối hoàn hảo. –
ok hãy để tôi tạo ra một fiddle – himanshu
Hãy thử mã này
<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>
Thật không may điều này sẽ không phân phối các yếu tố đồng đều. Lề giữa những elems cần phải giống nhau. – Aymer
bạn đang dùng này text-align:justify; sai. thực sự có sự khác biệt giữa biện minh và display: inline;. nếu bạn nhìn vào mã của người trả lời đã được chấp nhận thì bạn sẽ thấy rằng anh ta đã sử dụng cả hai điều này tức là text-align: justify và display: inline là các thuộc tính của phần tử khác nhau và cho mục đích khác nhau.
nơi ông đã sử dụng text-align:justify; tài sản của container mà nói với các container để có một khoảng cách thích hợp giữa nội dung của nó và ông đã sử dụng display:inline; là tài sản của tất cả es hộp ra lệnh cho họ để sắp xếp theo một đường
nếu bạn sẽ chỉ sử dụng display:inline thì nó sẽ chỉ hiển thị chúng trong một dòng mà không quan tâm đến khoảng cách thích hợp nhưng nếu bạn xác định text-align:justify; thì itt sẽ quan tâm đến khoảng cách thích hợp hoặc tôi nên nói đệm bằng nhau từ đường viền của vùng chứa
tìm sự khác biệt giữa mã của anh chàng này ... thực sự anh ấy đã thêm rất nhiều css để làm cho nó hấp dẫn hơn nhưng tôi đã xóa tất cả những thứ chỉ để giải thích cho bạn:
code mà không 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 với 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;
}
và với điều này tôi hy vọng rằng bây giờ bạn có thể hiểu những gì bạn đã không thể hiểu được .... – anni
Hey, cảm ơn cho điểm, nhưng hãy thử với hai hoặc một yếu tố. Nó đặt chúng vào cực bên phải/bên trái, không phải những gì tôi mong đợi. Tôi đã đề cập đến lợi nhuận b/w elems và (cũng như margin b/w biên giới và elem) nên giống nhau. – Aymer
này nên là những gì bạn đang tìm kiếm. Nó đòi hỏi bạn phải quấn các yếu tố hàng của bạn bên trong một div "giả", nhưng điều đó sẽ ổn.
.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>
nếu bạn không cần phải hỗ trợ trình duyệt cũ, đó là worty để có một cái nhìn một flexbox: bắt đầu từ http://css-tricks.com/snippets/css/a- hướng dẫn-to-flexbox/và https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes –
Có, đừng bận tâm <= ie8 – Aymer