Zur Navigation

Aufzählung neben Text

1 MarkusWi

Hallo alle zusammen,

Ich dachte, ich hätte es richtig gemacht, aber es kommt nicht so, wie ich es gerne hätte.

<h2>Tischgarnitur Vorlage</h2>
</div>
<div class="tblBoxTexte">
<div class="tblBoxOne">Lyric</div>
<div class="tblBoxOne">
<ul>
 	<li class="tblBoxOne">Fach</li>
</ul>
</div>

Ich möchte, dass auf einem breiten Bildschirm (PC) die beiden tblBoxOne nebeneinander stehen, während auf einem schmalen Bildschirm (Handy) die Boxen untereinander sind.




div.tblBoxTexte{
 background: #E6E6E6;
 margin: 1px;
 border-radius: 15px 15px 15px 15px;
 border-color: DarkSlateGray;
 border-width: 0px;
 border-style: none;
 display: flex;
 flex-wrap: wrap;
}

div.tblBoxOne{
 background: #E6E6E6;
 margin: 1px;
 padding: 1em;
 box-sizing: border-box;
 border-radius: 15px 15px 15px 15px;
 border-color: DarkSlateGray;
 border-width: 0px;
 border-style: solid;
 display: flex;
}

Die Webseite wäre https://naturalstone.ch/produkte/granittisch/#uebersicht

Vielen Dank für jede Info welche die Boxen nebeneinander bringt wenn es genügend Platz hat.

23.01.2019 17:10

2 Jörg

Du musst eine feste Breite definieren, damit die Box "weiß", wieviel Platz sie einnehmen darf, ansonsten nimmt sie sich 100%. Mit "flex-grow: 1;" wird dann sichergestellt, dass der übrige Platz auf die Boxen der betreffenden Reihe verteilt wird.

div.tblBoxTexte div.tblBoxOne {
    width: 400px;
    flex-grow: 1;
}

23.01.2019 18:20

1 Forenmitglied fand diesen Beitrag gut

3 MarkusWi

Mega super vielen Dank. Wow, habe es eingebaut und sogar die "Weiche" für kleine und grosse Bildschirme gefunden.
Konnte sogar für PC einen weissen Rand um die beiden Texte machen während auf dem kleinen Smartphone keine Rahmen sind und alles ganz eng ist...

Du hast ein mega super Forum. Vielen lieben Dank.

23.01.2019 22:48

Beitrag schreiben (als Gast)





[BBCode-Hilfe]