CSS如何自动调整div的大小以适应内容?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1219)

请看我的代码:http://jsfiddle.net/ob5rmnk2/7/

如你所看到的,我的段落文本显示在div内容外面。

如何更改CSS,这样文本就可以自动调整大小以适应我的内容div?我需要内容div自动调整大小。

如果你使屏幕变小,你可以看到文本开始折叠,并显示超出内容的块高度,这是我想要修复的。我希望它总是显示在内容div中。

另外,我怎样才能让我的buttons可以自动从上面的段落中得到一个50 px的空白(或一些固定的空间)。

提问于
用户回答回答于

试着在你的CSS.test-inner-righ中使用word-break: break-allt,就像这样:

.test-inner-right {
    padding-right: 10px;
    /*width: 300px;*/
    width: 80%;
    height: auto;
    text-align: left;

    word-break: break-all;
}
用户回答回答于

我所做的改变:

  1. word-wrap: break-word;放在test-inner-right类里,这样我们就可以中断实际的文本(因为我们实际上没有空格)。
  2. test-inner-right test-inner-left里移除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>

扫码关注云+社区

领取腾讯云代金券