Wie bekomme ich schwimmende Divs in der Div-Festbreite, um horizontal fortzufahren?
https://stackoverflow.com/questions/1015809
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe eine Container -Div mit fester Höhe und Breite (275x1000px). In diesem Div möchte ich mehrere schwimmende Divs mit einer Breite von 300 Px einstellen und eine horizontale (X-Achse) Scrollbar scheinen, damit der Benutzer nach links und rechts alles scrollen kann, um alles anzuzeigen.
Dies ist mein CSS bisher:
div#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
div#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
Das Problem ist, dass die schwebenden Divs die Breite des Behälters nicht weiterhin überschreiten. Nachdem sie drei der schwebenden Divs gestellt haben, werden sie weiter unten weitermachen. Wenn ich das Überlauf in das Auto ändere, wird die vertikale Bildlaufleiste angezeigt und ich kann nach unten scrollen.
Wie kann ich dies ändern, damit die schwimmenden Divs weitermachen, ohne sich gegenseitig zu unterziehen?
Lösung
div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}
div#container span.block {
width: 300px;
display: inline-block;
}
Der Trick hier sind nur Elemente, die sich standardmäßig als Inline verhalten werden, wenn sie im Internet Explorer auf Inline-Block festgelegt u003Cspan>werdenu003C/span> .u003Cdiv> u003Cspan>.u003C/span>
Andere Tipps
Sie benötigen eine zusätzliche DIV mit einer großen Breite, um die Blöcke zu enthalten. Sie erstrecken sich weiter als die Container -DIV und fallen nicht auf eine neue Linie.
Die HTML:
<div id="container">
<div id="width">
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<!-- more blocks here -->
</div>
</div>
Das CSS:
#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#container #width {
width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
#row {
white-space: nowrap; /* important */
overflow: auto;
}
.items {
display: inline-block;
}<div id="row">
<div class="items">
<img src="//placehold.it/200/100" alt="item 1" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 2" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 3" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 4" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 5" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 6" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 7" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 8" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 9" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 10" />
</div>
</div>Der Trick hier ist die Eigenschaft "White-Space: Nowrap" des Elternteils, die lediglich allen Kinderelementen mitteilt, dass sie horizontal fortgesetzt werden sollen, und das Eigentum "Anzeige: Inline-Block" von seinen Kindern. Sie müssen keine andere Eigenschaft hinzufügen, um diese Arbeit zu machen.
JS Fiddle: http://jsfiddle.net/2c4jfetf/
Wickeln Sie Ihre schwebenden Divs mit der breiteren Breite in eine andere DIV.
<div style="width:230px;overflow-x:auto;background-color:#ccc;">
<div style="width:400px">
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
</div>
</div>
Die Tabellenlösung sollte sehr gut funktionieren.
Wenn Sie keine Tabellen verwenden möchten, können Sie auch alle .Block -Divs in eine andere DIV in den #Container einfügen und diese "Zwischendiv" ein festgelegtes - berechnete - Breite mit JavaScript nach dem Laden der Seite geben.
Wenn Sie bereits wissen, wie viele .Blocks Sie haben / wenn die Nummer festgelegt ist, können Sie mit CSS das "Zwischendiv" eine feste Breite angeben.
Es hört sich so an, als würden Sie Galerie mit Divs machen?
Wofür verwenden Sie die Divs?
Es kann einfacher sein, ein UL/Li mit Spannweiten innerhalb des Li zu verwenden, um den gleichen Effekt ohne alle Kopfschmerzen von schwimmenden Divs zu erzielen.
Verwenden:
div#container {
overflow: auto;
}
Oder fügen Sie eine Clearing -Div unter den drei Divs mit dem Stil hinzu:
{
clear: both
}
Stellen Sie die Divs ein, die Sie in einem Tisch wie SO scrollen möchten:
<div style='width:1000;border:2 solid red;overflow-x:auto'>
<table><tr>
<td><div style='width:300;height:200;border:1 solid black'>Cell 1 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 2 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 3 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 4 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 5 </div></td>
</tr></table>
</div>
Bearbeiten: Ich habe 3 dieser vorgeschlagenen Lösungen ausprobiert - sie funktionieren alle in Google Chrome einwandfrei - aber die erste (Container1) funktioniert in IE (Go -Abbildung) nicht - also erhält die Span -Lösung meine Stimme :-):
<html>
<body>
<style>
div#container1
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container1 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container2
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container2 span.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container3
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container3 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
</style>
<p>
<div id='container1'>
<div class='block'>Cell 1 </div>
<div class='block'>Cell 2 </div>
<div class='block'>Cell 3 </div>
<div class='block'>Cell 4 </div>
<div class='block'>Cell 5 </div>
</div>
<p>
<div id='container2'>
<span class='block'>Cell 1 </span>
<span class='block'>Cell 2 </span>
<span class='block'>Cell 3 </span>
<span class='block'>Cell 4 </span>
<span class='block'>Cell 5 </span>
</div>
<p>
<div id='container3'>
<table><tr>
<td><div class='block'>Cell 1 </div></td>
<td><div class='block'>Cell 2 </div></td>
<td><div class='block'>Cell 3 </div></td>
<td><div class='block'>Cell 4 </div></td>
<td><div class='block'>Cell 5 </div></td>
</tr></table>
</div>
</body>
</html>
Bearbeiten 2:
Ich habe diese Testseite über Browsershots.org durchgeführt, um zu sehen, wie unterschiedliche Browser damit umgehen. Schlussfolgerung: Die Browserkompatibilität ist scheiße. :-)
http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm
Die Tischlösung funktionierte häufiger - aber die Spannweite (die sauberer ist) brach nur von Browsern ab, von denen ich noch nie gehört habe. :-)
Meine Ex:
DIV -Breite: 850px GridView TemplatedColumn itemTemplate
<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>
End itemTemplate End TemplatedColumn End Gridview End Div
Die Taste hat die linke mittlere (tatsächliche Taste) rechte Spannweiten, bei denen es nicht schwebend ist, wie es äußere Div mit fester Breite gab.
Ich musste zusätzliche DIV mit Breite 140px außerhalb der Taste in der ItemTemplate verwenden, dann funktionierte sie.
Hoffe das hilft!!!
Danke Harish
