Question

我的div中有3个元素，并且有溢出。前两个是div，第三个是表格。我需要将它们放在一行中。

我表格的宽度取决于单元格的宽度。设置表格宽度将使此操作变得容易，但是由于单元格数量不同，我无法做到这一点。我希望它溢出父div并使其可滚动而不基于父宽度缩小。这是通过将表格的宽度设置为100％并将表格布局设置为固定来实现的。但是因为它的宽度设置为100％，所以将其放在第二行。

我无法在桌子上设置绝对位置，因为它包含在可移动的div中。我需要它相对于父div。我发现可以通过在表上设置负的margin-top来实现这一点，但是如果我的前两个元素的高度发生变化，我不希望对此进行硬编码。

这是我的情况的JSFiddle：https://jsfiddle.net/9mvjftag/

HTML：

<div class="container">
  <div class="first-row">
    test
  </div>
  <div class="second-row">
    test
  </div>
  <table>
    <tr>
      <td>test</td>
      <td>test2</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test2</td>
    </tr>
  </table>
</div>

CSS：

.container {
  width:300px;
  background-color:red;
  overflow: auto;
}

.container > * {
  float: left;
}

table {
  table-layout: fixed;
  width: 100%;
}

table td {
  background-color: white;
  width: 200px;
}

我该如何实现？如果有另一种方法可以实现当前情况（更改其宽度由单元格宽度确定，则父div溢出），更改表的CSS也可以。

Answer 1

这里有一个article，可能会帮助您涉及使用Flexbox。

因此，在您的情况下，这可能有效

HTML

<ul class='row'>
  <li class='item'></li>
  <li class='item'></li>
</ul>

CSS

.row{
  background-color: #fff;
  min-width: 100%;
  min-height: 200px;
  display:  flex;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
}

.row::-webkit-scrollbar {
  display: none;
}

 .item{
   background-color: #e74c3c;
   min-width: 200px;
   margin: 5px;
 }

所有的类名或HTML选择器都可以互换，我只使用了％ul和％li和示例

将元素放在一行中，包括宽度为100％的表格

1 个答案: