html - CSS 如何自动调整我的 div 大小以适应内容？

Question

请看我的http://jsfiddle.net/ob5rmnk2/7/如您所见，我的段落文本显示在我的 div 内容之外。

如何更改 CSS 以便文本可以自动调整大小以适应我的内容的 div？我相信我需要内容 div 来自动调整大小。

如果您将屏幕变小，您会看到文本开始折叠并且显示超出了我想要修复的内容 block 高度。我希望它始终显示在内容 div 中。

此外，我如何制作我的按钮，以便它们始终自动与上面的段落有 50px 的间隙(或一些固定的空间)？

Answer 1

我所做的改变:

1. word-wrap: break-word; 在 test-inner-right CSS 类中，以便我们在实际文本上打断(因为我们实际上没有空格)
2. 在 test-inner-right 和 test-inner-left` CSS 类中删除了 height: 100px;。由于固定高度不会使其“自动调整大小”

片段:

.test-prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
}

.test-prompt-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: .8;
}

.test-prompt-content {
  position: relative;
  z-index: 5;
  background: yellow;
  padding: 20px 15px;
  margin: 10% auto;
  width: 350px;
  max-width: 100%;
  border: 3px solid blue;
  max-width: 80%;
}

.test-prompt-content-title {
  font-size: 16px;
  margin-bottom: 10px;
  color: #3F3F3F;
  text-align: center;
}

.test-prompt-content-buttons {
  margin-bottom: 10px;
  padding-top: 200px;
  text-align: center;
  margin-top: 20px, auto;
}

.test-inner-right {
  padding-right: 10px;
  float: right;
  /*width: 300px;*/
  max-width: 80%;
  word-wrap: break-word;
  text-align: left;
}

.test-inner-left {
  float: left;
  /*width: 10px;*/
  max-width: 10%;
  color: blue;
  text-align: right;
  padding-left: 20px;
}

.test-inner {
  border: 3px solid red;
}

<div class="test-prompt">
  <div class="test-prompt-backdrop"></div>
  <div class="test-prompt-content">
    <div class="test-prompt-content-title">
      <p class="test-1"></p>
      <br /> Title
    </div>

    <div class="test-inner">

      <div class="test-inner-left">
        <p class="test">

        </p>
      </div>
      <div class="test-inner-right">
        <p>
          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </p>
        <p>
          bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
        </p>
      </div>

      <div class="test-prompt-content-buttons">
        <div>
          <button id="continue" type="button">Continue</button>
        </div>
        <br />
        <div>
          <button id="cancel" type="button" class="btn btn-default">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>