<分区>
html - 将 Div 排列成字母
所以我有这段代码:
https://jsfiddle.net/bdqgszv5/1/
没有jsfiddle的代码:
<section id="aussteller" class="row separated">
<div class="section-header text-center">
<h2>Aussteller</h2>
<h4>Unsere Aussteller informieren Sie über die neusten Innovationen</h4>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://allbrochures.net/wp-content/uploads/2015/04/ricoh-logo.jpg" alt="Ricoh">
</div>
</div>
<h3>Ricoh</h3>
<p>Zeigt uns im RICOH-truck die neusten Drucksysteme</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://reonline.com/wp-content/uploads/2014/01/lexmark-logo-18863_640x480.jpg" style="width: 220px; height: 220px" alt="Lexmark">
</div>
</div>
<h3>Lexmark</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://www.samsung.com/us/images/common/samsung-logo.jpg" style="width: 220px; height: 220px" alt="Samsung">
</div>
</div>
<h3>Samsung</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://cf.juggle-images.com/matte/white/280x280/papyrus-logo-primary.jpg" style="width: 220px; height: 220px" alt="Papyrus">
</div>
</div>
<h3>Papyrus</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://seeklogo.com/images/F/Fujitsu-logo-5CECF13A58-seeklogo.com.gif" style="width: 220px; height: 220px" alt="aussteller 5">
</div>
</div>
<h3>Fujitsu</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://a1135.phobos.apple.com/us/r30/Purple4/v4/5f/85/bd/5f85bd7c-f6f9-6544-25fb-f00fd604b21a/mzl.snejseuw.png" style="width: 220px; height: 220px" alt="aussteller 6">
</div>
</div>
<h3>ELO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</section>
现在我想重新排序，这样我就可以得到这个:
它应该是响应式的并且永远不会松散顺序。 我怎么能这样做？
最佳答案
我只是熟悉 css 基础，但我相信设置几乎与 12 作为神奇数字相同。将其编码为网格宽度小的 2 列，并保留一些空白以匹配您的布局。
编辑:您可以将空白空间用作小的 4 列，或者如果可能的话，您可以使用中心类。祝你好运:)
关于html - 将 Div 排列成字母，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31739678/