html - 具有最大宽度和粘贴图像/文本的网格

Question

我需要实现图像和文本的锯齿形，如下所示:

文本 - 图片

图像 - 文本

文本 - 图片

在手机上

图片

文字

图片

文字

图片文字

--

第一个问题是移动设备上的顺序与 Web 上的顺序不同，但我认为我可以通过推拉 md 类来实现这一点。

我真正的问题是，在网络版本上，我需要文本在左侧对齐，但不知何故总是 float 在一起。

当我把类放在md-6 md-6 它会自动将 block 与左侧对齐并创建不需要的间距。当我使用文本对齐时，文本不再对齐，当我使用 float 时，div 交换位置。有没有一种简单的方法可以实现这样的目标？

由于它需要保持在中间，我计划使用最大宽度。

<div class="row">
  <div class="col-xs-12 col-md-6">
    <h2>Snel van start</h2>
    <p>In minder dan 1 minuut je vacature op de smartphone van duizenden geschikte jobstudenten.</p>
  </div>
  <div class="col-xs-12 col-md-6">
    <%= image_tag("snel-van-start.png") %>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 col-md-6">
    <%= image_tag("alles-in-eigen-handen.png") %>
  </div>
  <div class="col-xs-12 col-md-6">
    <h2>Alles in eigen handen</h2>
    <p>Seal Jobs analyseert en sorteert alle kandidaten automatisch. Jij kiest dan de geschikte kandidaat, zonder tijd te verliezen.</p>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 col-md-6">
    <h2>Directe communicatie</h2>
    <p>Ideale kandidaat gevonden? Via de ingebouwde chatfunctie kan je met meteen verdere afspraken maken met je gematchte kandidaat.</p>
  </div>
  <div class="col-xs-12 col-md-6">
    <%= image_tag("directe-communicatie.png") %>
  </div>
</div>

给出这样的东西:

那么我怎样才能确保文本和图像之间没有丢失空间呢？

Answer 1

你可以做一些事情，比如用 div 包裹内部内容并 float 它们，这样你的对齐方式将保持不变，空间问题将得到解决。

<div class="row">
<div class="col-xs-12 col-md-6">
  <div class="pull-right">
     <h2>Snel van start</h2>
     <p>In minder dan 1 minuut je vacature op de smartphone van duizenden 
      geschikte jobstudenten.</p>
  </div>
</div>
<div class="col-xs-12 col-md-6">
  <div class="pull-left">
     <%= image_tag("snel-van-start.png") %>
  </div>
</div>
</div>