Question

我有几个月的时间，每个月都会有一个或多个文字模糊，然后说出一些新闻。我正在寻找一种方法让所有文本框对齐到同一个位置。

这是我的HTML：

<div class="container">
      <h2 class="Date">October</h2>
      <p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
<div class="container">
      <h2 class="Date">June</h2>
      <p class="info">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>

这是一个JS小提琴： http://jsfiddle.net/530s6hqL/3/

在那个小提琴中，我的目标是让“Duis”和“Lorem”缩进相同的数量。

感谢您提供任何帮助！

Answer 1

这对你有用吗？

http://jsfiddle.net/x9mtw8uL/

我将 info 类的css更改为以下内容：

.info {
    position: relative;
    margin-left: 100px;
    display: block;
    overflow: auto;
}

margin-left 可以更改为适合您的任何内容。

Answer 2

您尝试实现的目标似乎是表格式，月份名称作为行标题（在第一列中），每月一些内容作为数据单元格。使用html表格可以最自然，最安全地实现这一点，但可以使用当前标记进行模拟，并在其上使用CSS表格。基本表格式化不需要外部容器，但它是实现单元格之间所需间距的最简单方法（因为border-spacing需要位于display值为{table的元素上1}}或inline-table）。这样的“缩进”（使所有段落水平地从同一点开始）是通过基本表格格式实现的。

.table {
  display: table;
  border-spacing: 0.5em 0.8em;
}
.container {
  display: table-row;
}
.container > h2, p.info {
  display: table-cell;
  vertical-align: middle;
}

<div class="table">
<div class="container">
          <h2 class="Date">October</h2>
          <p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    <div class="container">
          <h2 class="Date">June</h2>
          <p class="info">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>

Answer 3

用户@David Thomas用他的评论回答了这个问题。如果他想提交它作为答案，我会将正确的答案切换给他，但解决问题的是为.Date元素添加宽度。

使段落缩进到同一个地方

3 个答案: