Ich habe einige Elemente gleichmäßig in einem anderen div und flüssig zu platzieren, wie verspottet unter:Wie verteilt man Elemente gleichmäßig in einem div?
Ich habe den Trick mit text-align gesehen: rechtfertigen gegeben in (https://stackoverflow.com/a/6880421/2159250), aber ein oder zwei Elemente gegeben, seine Platzierung (gerechtfertigt) auf der rechten/linken Seite wie folgt: (was ist nicht das, was ich suche).
Jede Hilfe wäre sehr dankbar.
links ausgerichteten Inhalt sieht wie folgt aus (eine oder mehrere Punkte stellen ein Leerzeichen dar):
+----------------------------------------------+
|word.word.word.word |
+----------------------------------------------+
(1)text-align: justify berechtigt nicht zur letzten (oder einzigen) Linie *. Eine einfache Lösung ist es, ein sehr lange Wort hinzufügen, die nur auf einer eigenen Zeile passen:
+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+
(2) Sie wollen Leerzeichen vor dem ersten und nach dem letzten Wort.Eine einfache Lösung ist dummy Wörter hinzuzufügen, um das folgende Ergebnis zu erzeugen:
+----------------------------------------------+
|dummy....word....word....word....word....dummy|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+
Das gewünschte Ergebnis kann durch Hinzufügen zusätzlicher Auszeichnungs erreicht werden. Zum Beispiel:
.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 Eigenschaft könnte in Zukunft
Danke, es hat funktioniert. Nur eine Anmerkung: es ist wichtig, nach dem Dummy Div Raum oder Newline zu haben (es dauerte ein paar Stunden, um das herauszufinden). – 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;
}
Nicht alles selbst wird es nicht; Können Sie Ihre Antwort vervollständigen und das gewünschte Styling für das Elternelement angeben? Und selbst dann, wie in der Frage angegeben, ist es nicht unbedingt perfekt verteilt. –
ok lass mich eine geige erstellen – himanshu
diesen Code Versuchen
<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>
Leider wird dies nicht die Elemente gleichmäßig verteilen. Die Marge zwischen diesen Elementen muss gleich sein. – Aymer
Sie diese text-align:justify; falsch einnehmen. tatsächlich gibt es einen Unterschied zwischen justify und display: inline;. Wenn Sie sich den Code der Person ansehen, die die Antwort akzeptiert hat, dann werden Sie feststellen, dass er sowohl das Ding, d. h. text-align: justify als auch display: inline als die Eigenschaften verschiedener Elemente und für verschiedene Zwecke verwendet hat.
der Ort, wo er die text-align:justify; Eigenschaft Container verwendet hat, die die Behälter sagt einen geeigneten Abstand zwischen seinem Inhalt zu haben, und er display:inline; als Eigentum alle Box es sie bestellen in einer Linie
Wenn Sie nur display:inline verwenden, wird es nur in einer Zeile angezeigt, ohne sich um den richtigen Abstand zu kümmern, aber wenn Sie text-align:justify; definieren, wird es sich um den richtigen Abstand kümmern oder ich sollte gleiches Padding vom Rand des Containers
schauen Sie den Unterschied zwischen dem Code dieses Kerls ... tatsächlich hat er eine Menge css hinzugefügt, um zu machen es attraktiver, aber ich habe das ganze Zeug einfach gelöscht Ihnen zu erklären:
code ohne 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 mit 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;
}
und damit hoffe ich, dass Sie jetzt verstehen können, was Sie nicht verstehen konnten .... – anni
Hey, danke für den Punkt, aber versuch es mit zwei oder einem Element. Es bringt sie in extreme rechte/linke Seite, nicht was ich erwarte. Ich erwähnte den Rand s/w-Elemente und (auch Rand s/w Grenze und elem) sollte gleich sein. – Aymer
für dieses sollte verwendet werden, das, was Sie suchen. Es erfordert, dass Sie Ihre Zeilenelemente innerhalb eines "Dummy" -div einpacken, aber das sollte in Ordnung sein.
.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>
wenn Sie nicht brauchen, älteren Browser zu unterstützen, ist es worty ein nehmen Flexbox aussehen: Start von http://css-tricks.com/snippets/css/a- guide-to-flexbox/und https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes –
Ja, macht nichts <= ie8 – Aymer