2016-04-02 14 views
0

Ich arbeite an einem Projekt und ich kam an einen Ort, wo ich entschied, eine Collage zu realisieren. Ich habe die Collage bereits getan, und es ist hier: FiddleErstellen Sie eine Collage von Bildern in CSS

Aber ich möchte die gleiche Sache tun, ohne die Eigenschaft float auf den Elementen div1 zu verwenden.

Wenn möglich, würde ich nur die Eigenschaften right und left für das Element div1 verwenden, ohne die Größe der Elemente dieses div zu reduzieren.

Tut mir leid, ich bin kein englischer Muttersprachler, ich versuche mein Bestes.

+0

Fiddle Link ist nicht da. – Roy

+0

Beitrag wurde aktualisiert –

Antwort

0

Hoffentlich würden Sie so etwas wie dies gerne sehen:

body { 
 
    width: 380px; 
 
    margin: 0 auto; 
 
} 
 

 
.div1{ 
 
    text-align:justify; 
 
} 
 

 
.div1:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.div1 span img{ 
 
    width:45%; 
 
}
<div class="div1">  
 
    <span><img src="http://lorempixel.com/189/324/" alt=""/></span> 
 
    <span><img src="http://lorempixel.com/189/324/" alt=""/></span>  
 
</div> 
 

 
<div class="div2"> 
 
    <img src="http://lorempixel.com/380/325/" alt=""/> 
 
</div>

Mein Kommentar: Ich habe eine 'img' width Wert eingestellt 45%, aber Sie könnten es auf jeden Wert einstellen, der gleich oder kleiner als 50% ist. Übrigens schlage ich vor, dass Sie das Tag 'span' anstelle von 'p' verwenden, da 'span' meiner Meinung nach für diesen Zweck besser geeignet ist. Wenn Sie meinen Ansatz verwenden, können Sie dem übergeordneten "div" -Tag eine beliebige Anzahl von Bildern hinzufügen. Wenn Sie beispielsweise eine beliebige Anzahl von Bildern hinzufügen und deren Gesamtbreite gleich oder kleiner als 100% ist, werden diese Bilder gleichmäßig in der Reihe platziert.

0

können Sie display: flex; wie, dass Sie Schwimmer verwenden müssen

body { 
 
/* width: 520px;*/ 
 
    margin: 0 auto; 
 
} 
 

 
/*.div1 p { 
 
\t margin-bottom: 0; 
 
\t margin-top: 0; 
 

 
}*/ 
 

 
.div1 { 
 
\t display:flex; 
 
    justify-content:center; 
 
} 
 
.div2{ 
 
    display:flex; 
 
    justify-content:center; 
 
}
<div class="div1"> 
 
\t \t \t <img src="http://lorempixel.com/189/324/" alt=""/> 
 
\t \t \t <img src="http://lorempixel.com/189/324/" alt=""/> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="div2"> 
 
\t \t \t <img src="http://lorempixel.com/380/325/" alt=""/> 
 
\t \t </div>

nicht meinen Sie so etwas?

.div1 { 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 
.div2 { 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    margin: auto; 
 
}
<div class="div1"> 
 
\t \t \t <img src="http://lorempixel.com/189/324/" alt=""/> 
 
    \t <img src="http://lorempixel.com/189/324/" alt=""/> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="div2"> 
 
\t \t \t <img src="http://lorempixel.com/380/325/" alt=""/> 
 
\t \t </div>

+0

Schön, Danke, es funktioniert. Haben Sie eine Vorstellung davon, wie dieselbe Anzeige mit den Eigenschaften 'rechts'' links' für die Elemente von 'div1' gemacht werden kann? –

+0

persönlich ich würde es mit flexbox – DanyCode

0

Dies ist, was für Sie gefragt. Aber ich empfehle, nicht mit diesem Ansatz zu gehen. Es wird ein Alptraum sein. Wenn sich die Bildgrößen ändern, ist es unmöglich, mit nur CSS zu korrigieren.

body { 
 
    width: 380px; 
 
    margin: 0 auto; 
 
} 
 

 
.div1{ 
 
    position:relative; 
 
    height:324px; 
 
} 
 
.div1 p { 
 
\t margin-bottom: 0; 
 
\t margin-top: 0; 
 
\t width:50%; 
 
    position:absolute; 
 
} 
 

 
.div1 p:first-child { 
 
    left:0px; 
 
} 
 

 
.div1 p:last-child { 
 
    left:50%; 
 
}
<div class="div1"> 
 
\t \t \t <p><img src="http://lorempixel.com/189/324/" alt=""/></p> 
 
\t \t \t <p><img src="http://lorempixel.com/189/324/" alt=""/></p> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="div2"> 
 
\t \t \t <img src="http://lorempixel.com/380/325/" alt=""/> 
 
\t \t </div>

+0

Danke für die Bereitstellung Ihrer Hilfe, mein Projekt reagiert, so dass die Größe der Bilder wird sich sicherlich auf der Bildschirmgröße ändern. Können Sie mir helfen, diesen CSS-Code beizubehalten? –

+0

Warum möchten Sie diesen bestimmten Code behalten? Wie ich schon sagte, kann man diesen Code nicht nur mit CSS reagieren lassen. Sie benötigen JS-Hilfe, was keine gute Übung ist. – Roy

+0

Das Projekt, an dem ich gerade arbeite, ist ein Karussell, das mit dem Plugin Eulenkarussell erstellt wurde. Dieses Karussell hat die Collage nicht korrekt dargestellt, wenn ich [Die Methode, die ich für meine Collage verwendet habe] verwende (http://jsfiddle.net/1b8euyr0/) Wenn ich 'display: flex' oder' display: table' verwende Ich habe Probleme mit bestimmten Browsern. –

Verwandte Themen