muszę umieścić kilka elementów równomiernie i płynnie wewnątrz innego div jak szydzili poniżej:Jak rozmieszczać elementy równomiernie wewnątrz elementu div?
Widziałem trick użyciu text-align: justify jako podana w (https://stackoverflow.com/a/6880421/2159250), ale biorąc pod uwagę jeden lub dwa elementy, jego umieszczenie (uzasadnione) na prawej/lewej stronie, jak podano poniżej: (co nie jest tym, czego szukam).
Każda pomoc będzie mile widziana.
Lewy wyrównane zawartość wygląda następująco (jeden lub więcej kropki reprezentują biały obszar):
+----------------------------------------------+
|word.word.word.word |
+----------------------------------------------+
(1)text-align: justify nie usprawiedliwia ostatniej (lub jedynej) linii *. Jednym prostym rozwiązaniem jest dodanie bardzo długi słowo, które mogą pasować tylko na linii własnych:
+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+
(2) chcesz spacje przed pierwszym i po ostatnim słowie.Jednym prostym rozwiązaniem jest dodanie obojętne słowa w celu wytworzenia następujące wyniki:
+----------------------------------------------+
|dummy....word....word....word....word....dummy|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+
Pożądany rezultat może być osiągnięty przez dodanie dodatkowych znaczników. Na przykład:
.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 nieruchomość może być wykorzystana w przyszłości
Dzięki, zadziałało. Tylko uwaga: ważne jest, aby mieć spację lub znak nowej linii po manekinie div (zajęło mi to kilka godzin, aby to rozgryźć. – 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;
}
Nie wszystko samo w sobie nie będzie; czy możesz uzupełnić odpowiedź i określić wymaganą stylizację na elemencie nadrzędnym? I nawet wtedy, jak wskazano w pytaniu, niekoniecznie jest doskonale rozprowadzany. –
ok, pozwól mi utworzyć skrzypce – himanshu
wypróbować ten kod
<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>
Niestety to nie rozdzieli elementów równomiernie. Marża między tymi elemami musi być taka sama. – Aymer
przyjmowaniu tego text-align:justify; źle. faktycznie istnieje różnica między uzasadnieniem a display: inline;. jeśli spojrzysz na kod osoby, której odpowiedź została przyjęta, okaże się, że użył zarówno rzeczy, to jest text-align: justify i display: inline jako właściwości różnych elementów i do różnych celów.
miejsce gdzie wykorzystał własność text-align:justify; pojemnika, który powie pojemnik mieć odpowiedni odstęp między jego zawartość, a on wykorzystał display:inline; jako własność wszystkich es pole, aby zamówić je zorganizować w linii
jeśli użyjesz tylko display:inline, to wyświetli je tylko w linii bez dbania o właściwe odstępy, ale jeśli zdefiniujesz text-align:justify;, to będzie dbać o właściwe odstępy lub powinien powiedzieć równe wypełnienie od granicy pojemnika
sprawdź różnicę między kodem tego faceta ... faktycznie on dodał dużo css do zrobienia to bardziej atrakcyjne, ale zostały usunięte wszystkie rzeczy po prostu wyjaśnić wam:
code bez 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 z 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;
}
i mam nadzieję, że teraz jesteście w stanie zrozumieć, czego nie byliście w stanie zrozumieć ... – anni
Hej, dzięki za punkt, ale spróbujcie z dwoma lub jednym elementem. Umieszcza je w skrajnej prawicy/lewej stronie, a nie w tym, czego się spodziewam. Wspomniałem o marży b/w elems i (jak również marginesie b/w border i elem) powinny być takie same. – Aymer
to powinno być to, czego szukasz. Wymaga to owinięcia elementów wiersza wewnątrz "dummy" div, ale to powinno być w porządku.
.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>
jeśli nie muszą obsługiwać starsze przeglądarki, to worty przyjrzeć się schematu flexbox: zacznij od http://css-tricks.com/snippets/css/a- guide-to-flexbox/i https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes –
Tak, nieważne <= ie8 – Aymer