| Autor |
Nachricht |
cnrad
Threadersteller
Dabei seit: 23.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 23.08.2010 20:18
Titel mehrere divs nebeneinander ohne umbruch |
  |
|
hey,
brauch dringend eure hilfe.
ich möchte ca 20-30 divs nebeneinander haben.
klar mit float:left und das div, was drumherum ist, hat auch eine feste breite und overflow auf scroll.
html:
| Code: |
<div id="high">
<div id="div" class="scase">test<br />test</div>
<div id="div" class="scase">test<br />test</div>
<div id="div" class="scase">test<br />test</div>
<div id="div" class="scase">test<br />test</div>
...
<div style="clear: both;"></div>
</div>
|
css:
| Code: |
#high{
padding: 10px;
height: 260px;
width: 930px;
overflow:scroll;
}
.scase{
position:relative;
text-align:center;
float: left;
width: 160px;
height: 260px;
margin-right: 10px;
background-color: #FFF;
border: 1px solid #333;
} |
so, aber dabei entsteht nach dem 5.div ein umbruch... was mach ich falsch?!
vielen dank!
cnrad
Zuletzt bearbeitet von cnrad am Mo 23.08.2010 20:22, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Mo 23.08.2010 20:23
Titel Re: mehrere divs nebeneinander ohne umbruch |
|
|
| cnrad hat geschrieben: | | das div, was drumherum ist, hat auch eine feste breite |
Wie oft passt 172 in 930?  Es wird immer dort einen Umbruch geben, solange Du ihn nicht verhinderst. Bei Float geht das nicht, es sei denn, Du fügst ein div hinzu, das die Floats mit ausreichender Breite umgibt. Erst dann kommt overflow des Eltern-divs zum Tragen.
Wenn Du keine ausreichende Gesamtbreite deklarieren kannst, weil die Anzahl der divs nicht bekannst ist, kannst Du es per inline-block mit white-space: nowrap; lösen, oder per display: table/table-cell (und für den IE < 8 wiederum per inline-block).
Zuletzt bearbeitet von heiko_rs am Mo 23.08.2010 20:27, insgesamt 3-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
cnrad
Threadersteller
Dabei seit: 23.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 23.08.2010 20:29
Titel
|
|
|
das es nicht passt ist mir klar - soll es ja auch nicht.
es sollen nur ein paar divs zu sehen sein, die anderen will ich per horizontalen scrollen erreichen (jetzt ist es vertikals scrollen)...
display: inline-block;
white-space: nowrap;
-> ändert nichts.
und mit display: table/table-cell geht das komplette design flöten...
was nun?!
trotzdem danke 
//okay nach dem ich nochmal genau gelesen habe ist mir aufgefallen, dass ich ja einfach noch ein div drum machen kann, was so groß ist wie alle divs zusammen und dann wird es auch so angezeigt wie ich es möchte!
vielen vielen dank!!! 
Zuletzt bearbeitet von cnrad am Mo 23.08.2010 20:46, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Eignanorra
Dabei seit: 08.09.2010
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mi 08.09.2010 12:47
Titel
|
|
|
Ich hab nun auch ewig an diesem Problem gesessen.
Damit das nun mal deulicher wird:
Ziel: mehrere Divs mit einer festen Breite und umgebrochendem Text als Inhalt sollen nebeneinander dargestellt werden, in einem Berech der eigentlich nicht ausreicht. Sie sollen dann in der Breite scrollbar sein und nicht nach unten umgebrochen werden.
so gehts nicht:
| Code: | <div id="content"> < !-- width:500px; Overflow:scroll -- >
<div class="a">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="b">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="c">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="d">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="e">langer text mit umbruch</div> < !-- width:200px; float:left -- >
</div>
|
man muss erst noch einen Bereich für die vielen kleinen divs definieren, der eine Breite hat, in der alle diese Divs untergebracht werden können.
so gehts:
| Code: | <div id="content"> < !-- width:500px -- >
<div id="scroll"> < !-- width:1000px; Overflow:scroll -- >
<div class="a">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="b">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="c">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="d">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="e">langer text mit umbruch</div> < !-- width:200px; float:left -- >
</div>
</div>
|
zumindest wird nun nix mehr umgebrochen,
allerdings wird leider der Bereich auch mit der Breite des Scroll-Divs angezeigt und nicht nach der Breite des content-Divs abgeschnitten.[/code]
Weiss jemand wie man das noch hinbekommt?
Danke schonmal
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 08.09.2010 12:54
Titel
|
|
|
|
Nicht das innere div braucht overflow, sondern das äußere.
|
|
| |
|
|
Eignanorra
Dabei seit: 08.09.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 08.09.2010 13:19
Titel
|
|
|
Du hast recht. Dass ich da nicht selbst drauf gekommen bin 
also nochmal richtig:
| Code: | <div id="content"> < !-- width:500px; Overflow:scroll -- >
<div id="scroll"> < !-- width:1000px -- >
<div class="a">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="b">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="c">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="d">langer text mit umbruch</div> < !-- width:200px; float:left -- >
<div class="e">langer text mit umbruch</div> < !-- width:200px; float:left -- >
</div>
</div> |
passt perfekt
Vielen Dank
Zuletzt bearbeitet von Eignanorra am Mi 08.09.2010 13:21, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] 4 DIVS nebeneinander
3 divs nebeneinander
[css] divs nebeneinander zentrieren
CSS / Newbie / DIVs nebeneinander positionieren?
2 Divs nebeneinander die zum Elternelement relativ sind?
3 Divs nebeneinander im Container auf einer Höhe?
|
|
Willkommen auf dem Portal für Mediengestalter
