Ich versuche, eine ansprechende Galerie mit HTML/CSS zu erstellen, wie hier in: machen ansprechende Galerie HTML/CSS
Das ist meine HTML und CSS:
<div id="flow" class="container-fluid clear">
<div id="photographies">
{% for photo in photographies %}
<div class="flow-photo {% if loop.index0 is odd %}odd{% endif %}">
<a href="{{ path('photo', { id: photo.getId }) }}"><img id="{{ photo.getId }}" src="{{ photo.getImage }}"></a>
<div class="info">
<div class="description">
<h1>{{ photo.getTitle }}</h1>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
#flow {background:#f1f1f1;padding: 0.5% 1%;}
.flow-photo {width:49.5%;float:left;margin:0.5% 0;}
.odd {margin-left:1%}
.flow-photo>a>img {width:100%;height:auto;border-radius:2px 2px 0 0;}
.info {background:#fff;border-radius:0 0 2px 2px;text-align:left;padding:7px}
.info h1 {margin:0;font-weight:700;font-size:11px;}
Mit diesem Strom Code Ich bekomme das nächste Gitter
Das dritte div ist nicht an der richtigen Stelle, denn das erste ist länger als das zweite, also nach dem zweiten div gibt es einen cha os.
Wenn ich nach jedem zweiten div hinzufügen clear:both
, bekomme ich diese:
Es gibt Lücken, weil einige divs länger als andere sind. Das ist nicht was ich will.
Was soll ich tun, um Responsive Galerie wie in meinem ersten Bild zu bekommen?
, warum Sie nicht das Layout Mauerwerk? dieser: http://maurerei.desandro.com/layout.html –