|
|
nocte
: 19.07.2006
: 39
|
| : 17.02.2012, 04:55 : Frage zu CSS: floats überlappen einander |
|
|
Ich habe mit Bootstrap ein Layout erstellt.
Das ganze ist in einem ".well" Container. Darin befinden sich einige Divs der Klasse ".box". Rechts sollte ein Bild erscheinen - umgeben von einem Div der Klasse ".profil-thumb". Das ganze soll so aussehen:
| Code: |
+------------------+ +--------+
| DIV1 | | |
| | | |
+------------------+ | BILD |
+------------------+ | |
| DIV2 | | |
| | +--------+
+------------------+
+-----------------------------+
| DIV3 |
| |
+-----------------------------+ |
das html sieht (vereinfacht) so aus:
| Code: |
<div class="profil-thumb">
<!-- Bild -->
</div>
<div class="box">
<!-- Div1 -->
</div>
<div class="box">
<!-- Div2 -->
</div>
<div class="box">
<!-- Div3 -->
</div> |
und das CSS:
| Code: |
.box {
border: 1px solid #999;
padding: 10px;
margin-top: 20px;
}
.profil-thumbs {
float: right;
margin-left: 20px;
} |
Leider überlappt bei diesem Code das Bild einfach die Boxen, d.h. die boxen laufen unter dem Bild bis zum rechten Rand weiter.
ich hoffe ich konnte mich einigermaßen verständlich ausdrücken. Kann jemand helfen?
nocte |
|
| Nach oben |
|
 |
dropsi
: 17.12.2007
: 55
|
| : 17.02.2012, 09:23 : Frage zu CSS: floats überlappen einander |
|
|
Floate div 1 und 2 mit left und gib am besten noch die Breite dazu an - dann sollte alles passen.
OXID Templates |
|
| Nach oben |
|
|
pimpi
: 13.12.2005
: 1492
: Norwegen
|
|
| Nach oben |
|
|
nocte
: 19.07.2006
: 39
|
| : 17.02.2012, 09:50 : Frage zu CSS: floats überlappen einander |
|
|
| Das Problem ist, dass die Höhe der Divs und der Thumbnails variabel ist, d.h. es kann auch sein, dass schon Div1 höher als das Bild ist oder umgekehrt mehrere Bilder angegeben werden. |
|
| Nach oben |
|
|
Melegrian
: 30.01.2005
: 924
: Stendal
|
| : 17.02.2012, 16:42 : Frage zu CSS: floats überlappen einander |
|
|
Lasse doch in diesem Fall den ersten und zweiten Text einfach laufen, dann passt der Inhalt sich doch von allein an. Und statt ein Bild passen da auch mehrere Bilder zwischen Div und /Div hinein.
| Code: |
<div style="float: right; margin: 5px 0px 5px 20px"><img src="Bild.jpg" alt="Text" width="xx0" height="xx0"></div>
<p style="text-align: left">Fließtext 1</p>
<p style="text-align: left">Fließtext 2</p>
<p style="text-align: justify; clear: both">Fließtext 3</p>
+------------------+ +--------+
| Absatz 1 | | |
| | | |
+------------------+ | BILD |
+------------------+ | |
| Absatz 2 | | |
| | +--------+
+------------------+
+-----------------------------+
| Absatz 3 |
| |
+-----------------------------+ |
Es sei denn Du möchtest Spalten erzwingen, auch wenn der Text oder die Bilder länger sind, dann lege ein "zweispaltiges" Div (2 DIVs) noch einmal darüber oder nehme halt eine Tabelle dafür.
| Code: |
+-------------------+---------+
| +---------------+ |+-------+|
| | Absatz 1 | || ||
| | | || ||
| +---------------+ || BILD ||
| +---------------+ || ||
| | Absatz 2 | || ||
| | | |+-------+|
| +---------------+ | |
+-------------------+---------+
+-----------------------------+
| DIV3 |
| |
+-----------------------------+ |
|
|
| Nach oben |
|
|
Suche für Ostsee Reise Seite: Links/Artikeltausch 
