Question

我目前正试图找到一种能够拥有自下而上，面向内容的大小调整行为的布局的方法。

我遇到以下情况：https://codepen.io/Flash1232/pen/JJYPVQ

这里有什么问题显然wrapper div不包围table div。现在有没有任何解决方案，只涉及简单的CSS和HTML，或者我必须在JS中写一些东西，比如“将包装器宽度设置为其内部div的宽度”？

提前感谢任何线索！

Answer 1

您可能需要考虑使用flexbox。请看下面。如果有什么需要有所不同，请告诉我。

.outer-div {
  position: absolute;
  background: black;
  width: 800px;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  padding: 10px;
}

.area {
  overflow: auto;
  display: flex;
  border: 5px solid red;
  background: white;
  margin: 10px 40px 10px 10px;
}

.column {
  background: green;
  border: 5px solid blue;
}

.wrapper {
  display: flex;
  border: 5px solid yellow;
  justify-content: center;
  align-items: center;
}

.table {
  white-space: nowrap;
}

.violet {
  background: violet;
  width: 120%;
  height: 80px;
}

.red {
  background: red;
  width: 150%;
  height: 80px;
  margin-bottom: 20px;
}

.icons {
  Background: yellow;
  float: right;
  height: auto;
  width: auto;
}

<div class="outer-div">
  <div class="area">
    <div class="column">
      <div class="wrapper">
        <div class="table red">
          <span>***Table Content***</span>
        </div>
      </div>
      <div class="wrapper">
        <div class="table violet">
          <span>***Table Content***</span>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="wrapper">
        <div class="table violet">
          <span>***Table Content***</span>
        </div>
      </div>
    </div>
  </div>
  <div class="icons">
    <p>Icon</p>
    <p>Icon</p>
    <p>Icon</p>
    <p>Icon</p>
    <p>Icon</p>
    <p>Icon</p>
  </div>
</div>

Answer 2

您应该阅读width属性的定义。

https://developer.mozilla.org/en/docs/Web/CSS/width

百分比：参考包含块的宽度

如果将宽度设置为150％，则明确指出，子项应大于父项。如果强迫孩子更宽，你不能指望父母的宽度与孩子一样宽。

Answer 3

老兄，我在父元素上用display:flex解决了我的问题：）

父DIV从子div

3 个答案: