Horizontaler Bildlauf von Elementen (100% Breite) innerhalb des übergeordneten Elements mit Prozentwert

Question

Ich verwende Bootstrap3 zum Erstellen von Seiten in meiner Anwendung.

Irgendwo tief in einer Seite habe ich die Spalte (col-md-6), deren Breite in Prozent berechnet wird. Mein aktuelles Ziel ist es, dieses Element mit einem Satz untergeordneter Elemente zu füllen, wobei folgende Regeln zu beachten sind:

Höhe jedes untergeordneten Elements muss vom übergeordneten Element geerbt werden;

Die Breite jedes untergeordneten Elements muss der Breite des übergeordneten Elements entsprechen.

Kindelemente müssen horizontal platziert werden;

Das übergeordnete Element muss einen horizontalen Bildlauf zum Navigieren durch Elemente haben.

Wenn wir feste Werte verwenden (in px), wird die Aufgabe ziemlich einfach. Wie hier http://jsfiddle.net/vUEYG/

Aber ich habe keine Ahnung, wie man es mit Prozentwerten löst. Ich meine, ok, ich kann ein Wrapper-Element mit einer Breite von N * 100% hinzufügen (wobei N die Anzahl der untergeordneten Elemente ist). Aber dann ist die Frage, wie man die Breite der Kindelemente auf diese 100% setzt? :)

Könnte jemand einen Rat geben?

Danke

Answer 1

Mit einigen jQuery-Code Sie alles auf der Grundlage der meisten externen div Breite tun können:

var childElementsNum = $('#wrapper')[0].childElementCount; 
 

 
var itemWidth = $('#containersimg').width() 
 
var itemSize = $('#containersimg').width() + 10; //here we add the 5px margin to left and right 
 

 
$('#wrapper').css("width", itemSize * childElementsNum + 'px'); 
 

 
$('.square').css("width", itemWidth + 'px');

#wrapper { 
 
    height: 110px; 
 
} 
 

 
#containersimg { 
 
    background-color: #bbb; 
 
    width: 500px; 
 
    height: 135px; 
 
    overflow: hidden; 
 
    overflow-x: scroll; 
 
} 
 

 
.square { 
 
    background-color: #00b; 
 
    float: left; 
 
    height: 90px; 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="containersimg"> 
 
    <div id="wrapper"> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    </div> 
 
</div>

Aber ich empfehle Ihnen wirklich zu verwenden, um einige Plugin, ich vorschlagen Eulenkarussell: https://owlcarousel2.github.io/OwlCarousel2/

Answer 2

Wenn ich unter stand Ihre Anforderungen, ich glaube, Sie können flex-box verwenden, um dies zu erreichen.

Beachten Sie, dass kein Bootstrap verwendet wird, um dies zu erreichen, nur gerade css. Bei Interesse gibt es eine eher gründliche Aufschlüsselung von flex-boxhere.

#mask { 
 
    display: block; 
 
    height: 100px; 
 
    width: 100%; 
 
    overflow-x: scroll; 
 
} 
 

 
content { 
 
    display: flex; 
 
    align-content: flex-start; 
 
    width: 200%; 
 
    height: 100%; 
 
} 
 

 
content > div { 
 
    flex-grow: 1; 
 
    height: 100%; 
 
    background-color: #f00; 
 
    border: 1px solid #fff; 
 
}

<div id="mask"> 
 
    <content> 
 
    <div></div> 
 
    <div></div> 
 
    </content> 
 
</div>

Answer 3

Da Ihr JSFiddle verwendet img Referenzen in den Klassennamen. Vielleicht könnte dies Ihre Herausforderung lösen

http://getbootstrap.com/javascript/#carousel

Dies ist ein anderer Ansatz zu dem, was es sieht aus wie Sie

Answer 4

versuchen zu erreichen Elemente zu platzieren horizontal müssen Sie Schwimmer hinzufügen: left; in te css für das spezifizierte Element

Ich ersetzte die.square css, die Sie im Link

.square { 
    background-color: #00b; 
    float: left; 
    height: 90px; 
    width: 18%; 
    margin: 1%; 
} 

width = 18% für den Inhalt und die Marge = 1% für jede Seite setzen

und es funktioniert auf die gleiche Art und Weise

Sie eine Spalte erstellen innen von einem anderen und legen Sie die Bootstrap Col-lg ... -Eigenschaft, aber wahrscheinlich können Sie nicht den horizontalen Scroll verwenden