Question

我有几个div元素，其中每个div内的某些段落（table）之间都有一个p，使用以下代码：

<p style="display: inline-block;">
    Something BEFORE the table
    <table style="display: inline-block;">
        <thead>
            <tr>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
            </tr>
        </tbody>
    </table>
    Something AFTER the table
</p>

产生的内容看起来像这样：

                          head
Something BEFORE the table    Something AFTER the table
                          data

但是，每个div的{{1}}之前和之后的内容长度都不同，如下所示：

table

我想要的是为每个head Something BEFORE the table Something AFTER the table data head Short BEFORE the table Short AFTER the table data head Something long BEFORE the table Something long AFTER the table data设置一些“边距”，以便它们与父元素的开头（在这种情况下为table）之间保持一定距离，因此希望它看起来像这样：

必须像这样处理页面的BEFORE，head Something BEFORE the table Something AFTER the table data head Short BEFORE the table Short AFTER the table data head Something long BEFORE the table Something long AFTER the table data和AFTER元素，因为将它们分别放在自己的table上并排显示会破坏该页面部分的样式，也会产生类似的问题，但现在是垂直方向（但是，如果您的解决方案需要这样做，请共享...也许我最终会使用它）。

P.D：如果您的解决方案包括Bootstrap，请使用版本3。

P.D.2：对于示例看起来如此凌乱，我仍然不习惯，感到抱歉。

Answer 1

将其包装成表格结构。这可以通过将div样式设置为表格来完成。这样，您可以使其响应。

！请勿再将其他块级元素放入p元素

请参阅：Why is <table> not allowed inside <p>

以下是您所需的HTML：

.table{
  display: table; 
  widht: 100%; 
}
.row {
  display: table-row;
}
.cell{
  display: table-cell;
  padding: 0 7.5px;
}

<div class='table'>
  <div class='row'>
    <div class='cell'>
      Something BEFORE the table
     </div>
     <div class='cell'>
      <table>
          <thead>
              <tr>
                  <th>header</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>data</td>
              </tr>
          </tbody>
      </table>
     </div> 
     <div class='cell'>
      Something AFTER the table
      </div>
  </div>

  <div class='row'>
    <div class='cell'>
      Something LONGGGGGG BEFORE the table
     </div>
     <div class='cell'>
      <table>
          <thead>
              <tr>
                  <th>header</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>data</td>
              </tr>
          </tbody>
      </table>
     </div> 
     <div class='cell'>
      Something AFTER the table
      </div>
  </div>
 </div>

Answer 2

要设置绝对位置，可以在要定位的元素上使用position: absolute。它将定位在其第一个非静态父级的坐标（0,0）（左上角）处。（默认情况下，每个元素的位置都设置为静态，直到您将其显式设置为其他位置为止）。因此，这意味着您还需要为父母分配一个职位（p是您的情况），以便覆盖默认职位。诸如position: relative之类的东西应该在父母身上完成。

之后，您可以分别使用“顶部，右侧，底部，左侧” CSS属性从父级的顶部/右侧/底部/左侧边界设置自定义位置。

p {
    position: relative;
}

table {
    position: absolute;
    left: 150px; // or whatever distance works best
}

类似的事情，或者等效的内联版本应该做。

Answer 3

这是一个简单的解决方案：

.before-table {
  min-width: 250px;
  display: inline-block;
}

<p style="display: inline-block;">
    <div class="before-table">Something BEFORE the table</div>
    <table style="display: inline-block;">
        <thead>
            <tr>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
            </tr>
        </tbody>
    </table>
    <span>Something AFTER the table</span>
</p>

如何使用CSS或Bootstrap为元素设置绝对边距？

3 个答案: