垂直排列 div 类磁贴

Question

我试图将名为tile的类与其他一些位放在它周围，以便它是一个垂直列表。 磁贴的大小不同，似乎没有垂直列出。我还想在旁边放一些文字，但不确定如何。 第一个磁贴内部有一个名为"概述"的标签，但其他磁贴我想在磁贴的右侧放置一些文本，而不会弄乱垂直对齐方式。

<div id="sidebar-company">
  <a class="tileSB bg-darkBlue animated six flipInX" data-click="transform">
    <div class="brand">
      <div class="text-center">
        <p class="fg-white">Overview</p></div>
    </div>
  </a>
  <a class="tileSB half bg-darkBlue animated seven flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png">
    </div>
  </a>
  <a class="tileSB half bg-darkBlue animated eight flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png">
    </div>
  </a>
  <a class="tileSB half bg-darkBlue animated nine flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png">
    </div>
  </a>
</div> <!-- End tile group -->

如何在 CSS 中执行此操作？

Answer 1

你可以做：

将它们显示为一个块 - 应该占据一个新行：

a.tileSB {
  display: block
}

浮动并清除所有元素：

a.tileSB {
  float: left;
  clear: left;
}

堆栈代码段中的演示

.tileSB {
  display: block
}

<div id="sidebar-company">
  <a class="tileSB bg-darkBlue animated six flipInX" data-click="transform">
    <div class="brand">
      <div class="text-center">
        <p class="fg-white">Overview</p></div>
    </div>
  </a>
  <a class="tileSB half bg-darkBlue animated seven flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png"> - Text 2
    </div>
  </a>
  <a class="tileSB half bg-darkBlue animated eight flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png"> - Text 3
    </div>
  </a>
  <a class="tileSB half bg-darkBlue animated nine flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png"> - Text 4
    </div>
  </a>
</div> <!-- End tile group -->

Answer 2

为所有a锚元素提供 CSS 属性 display:block

#sidebar-company a{
   display:block;
}

默认情况下，块元素垂直显示，因为它们占用所有可用空间