Hallo alle zusammen,
ich möchte gerne tt_news ordentlich gestalten. Was habe ich: Einen Seitenbereich mit 700px in dem drei tt_news Nachrichten nebeneinander und mit Rand dargestellt werden sollen. tt_news hat für die Formatierung der Box die Klasse ".news-list-item". Die Boxen, die tt_news also anlegt, sollten 220px breit sein. Bei drei Boxen nebeneinander bedeutet das 660px. 40px bleiben übrig für den horizontalen Abstand der Boxen. Also zwischen linker und mittlerer Box 20px und zwischen mittlerer und rechter Box 20px.
Und genau da beginnt mein Problem. Verwende ich also die Klasse von tt_news sieht das ganze so aus:
.news-list-item{
display:inline-block;
width:220px;
float:left;
border-width:1px;
border-style: solid;
border-color:#cccccc;
}
Baue ich nun hier ein margin-left:20px; ein, dann liegt die erste der drei News-Boxen nicht am Rand sondern ist 20px eingerückt. Dafür schließt die letzte Box schön am Rand ab. Mache ich das gleiche mit margin-right, liegt die linke Box zwar am Rand, aber die letzte Box springt in die nächste Zeile, weil sie nach rechts 20px mehr gibt.
Wie kann ich das machen, dass alle Boxen mit der Größe 220px den gleichen Abstand zueinander haben und immer schön am Rand abschließen?
Vielen Dank
Schöne Grüße
Mike
ich möchte gerne tt_news ordentlich gestalten. Was habe ich: Einen Seitenbereich mit 700px in dem drei tt_news Nachrichten nebeneinander und mit Rand dargestellt werden sollen. tt_news hat für die Formatierung der Box die Klasse ".news-list-item". Die Boxen, die tt_news also anlegt, sollten 220px breit sein. Bei drei Boxen nebeneinander bedeutet das 660px. 40px bleiben übrig für den horizontalen Abstand der Boxen. Also zwischen linker und mittlerer Box 20px und zwischen mittlerer und rechter Box 20px.
Und genau da beginnt mein Problem. Verwende ich also die Klasse von tt_news sieht das ganze so aus:
.news-list-item{
display:inline-block;
width:220px;
float:left;
border-width:1px;
border-style: solid;
border-color:#cccccc;
}
Baue ich nun hier ein margin-left:20px; ein, dann liegt die erste der drei News-Boxen nicht am Rand sondern ist 20px eingerückt. Dafür schließt die letzte Box schön am Rand ab. Mache ich das gleiche mit margin-right, liegt die linke Box zwar am Rand, aber die letzte Box springt in die nächste Zeile, weil sie nach rechts 20px mehr gibt.
Wie kann ich das machen, dass alle Boxen mit der Größe 220px den gleichen Abstand zueinander haben und immer schön am Rand abschließen?
Vielen Dank
Schöne Grüße
Mike
Abstände zwischen Elementen
Aucun commentaire:
Enregistrer un commentaire