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锚元素提供display:block

的CSS属性

#sidebar-company a{
   display:block;
}

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

Answer 2

您可以这样做：

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

a.tileSB {
  display: block
}

浮动并清除所有元素：

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

Stack Snippets中的演示

.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 -->

垂直排列div类瓷砖

2 个答案:

Stack Snippets中的演示