Question

这显然是或应该是一个荒谬的问题。在一个更大的网站（wordpress）的框架内开发一些网页内容，我正在研究某种“看起来”的内容。用于导航。这个外观是每个页面内容底部的大蓝色方块，它们并排放置，每个都包含链接文本，以及文本和框作为实体都可以点击的位置。

理想情况下，对于响应性，当屏幕空间变窄时，这些框将翻转到新行并形成多个按钮行。

除了CSS之外，执行这个奇迹是微不足道的，我开始将它与沐浴猫进行比较。它似乎完全不打算做我想要的事情。没有必要展示无数不同的代码片段，这些代码片段没有实现这一目标，您已经看过它们了。我需要明白：

a）如何以及哪种盒子应包含文本（span，div，frame等）

b）如何对齐右下方框中的文本，以便在必要时进行文本包装

c）如何相对于彼此和页面排列方框

c.i）盒子之间需要一个小的间隙，相同的间隙要么是水平的，要么是垂直的，这取决于它们如何堆叠/包裹。

c.ii）框需要左对齐，第一个框的左边缘与前一个文本块的左边缘对齐。

c.iii）前一个文本的底部和第一个框的顶部之间需要有一致的间隙。

理想情况下，您可以提供完成工作所需的简单代码，并解释其工作原理。

修改：已解决

这在Wordpress中是关键，特别是Wordpress文本编辑器正在用于编码。 Wordpress文本编辑器不作为代码编辑器，也不会使内容不受干扰。因此，代码编辑器中的空格被解释为破坏代码原始意图的html标记。

Answer 1

我认为你可以创建一个div作为父容器，每个框都作为一个div。使用跨度，您可以在每个框中包含文本。当你使盒子类的位置为＆＃34; relative，＆＃34;然后你可以绝对控制所包含的跨度的位置。请参阅以下示例：

HTML：

<div id="container">
  <div class="box">
    <span class="box-text">testing</span>
  </div>

  <div class="box">
    <span class="box-text">testing</span>
  </div>

  <div class="box">
    <span class="box-text">testing</span>
  </div>

  <div class="box">
    <span class="box-text">testing</span>
  </div>
</div>

CSS：

.box {
  width: 100px;
  height: 100px;
  background-color: #336699;
  float: left;
  position: relative;
  margin: 1em;
}

.box-text {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
  width: 100%;
  color: #fff;
}

http://codepen.io/anon/pen/zvGKVK

Answer 2

<div class="bluebox">
  <span class="text">Text</span>
</div>
<div class="bluebox">
  <span class="text">Text</span>
</div><div class="bluebox">
  <span class="text">Text</span>
</div><div class="bluebox">
  <span class="text">Text</span>
</div><div class="bluebox">
  <span class="text">Text</span>

.bluebox {
  height: 100px;
  width: 100px;
  background-color: blue;
  margin: 10px;
  display: inline-block;
  position:relative;
}

.text {
  position:absolute;
  bottom:0;
  right:0;
  width:100%;
  color:white;
  text-align:right;
}

http://codepen.io/anon/pen/dYoObJ

我想要四个蓝色的盒子，一个旁边的一个。他们需要有文字

2 个答案: