CSS 定位：将文本包装在模态框内

Question

一个相对（我希望）简单的关于 CSS 的问题，我显然只是没有得到。

我的页面上有一个具有以下样式定义的模式：

.modal
{
    position: fixed;
    width: 86% !important;
    left: 7% !important;
    height: 86% !important;
    top: 3% !important;  
    background-color: #ffffff;
    border-radius: 5px;
    text-align: left;
    margin: 10px;
    padding: 10px;
    z-index: 10000;
}

在模式中我想要 4 个项目：
1）左侧的图像，按比例调整为模态的高度
2) 图片右侧的文本框
3) 另一个文本框，也在图片右侧，第一个文本框下方
4）右上角一个'Close'按钮

这是模型：

我的问题是，当文本 2 的内容超出模态的末尾时，它不会将文本换行，而是将整个文本框移动到模态下方，从而使其实际上不可见。

我需要让文本 1 和文本 2 中的文本换行，尤其是在文本 2 中。

这里是 html 驱动这个的代码：

<div id="modal" class="modal" style="visibility: hidden;">
  <img align="middle" class="modalImg" id="modalImg" />
  <span style="float:left;">
    <h2 id="textBox1"></h2>
    <br/>
    <h3 id="textBox2"></h3>
    <img id="close" src="images/css/close.png" />
</div>

以及相关的 css 样式：

.modalImg
{
    height: 100%; width:auto;
    margin: 0px 25px 0px 0px;
    float: left;
}

.modal #close
{
    position: absolute;
    top: 5px;
    right: 5px;
}

h2 {
    color:#384D73;
    font-size:20px;
    margin:20px 0 10px 0;
    clear:both;
}

h3 {
    color:#384D73;
    font-size:18px;
    margin:20px 0 5px 0;
    clear:both;
    line-height: 125%;
}

谁能帮我正确配置一下？提前致谢！

Answer 1

您在找这样的东西吗？

Demo

body {
background:#ccc;
}

* {
box-sizing: border-box;
}

.modal {
    position: fixed;
    width: 80%;
    left: 10%;
    height: 80%;
    top: 10%;
    background-color: #fff;
    border-radius: 3px;
    margin: 10px;
    padding: 10px;
    z-index: 10000;
}

.modal-close {
    position:absolute;
    top:-10px;
    right:-10px;
    width:20px;
    height:20px;
    background:#333;
    border-radius:50%;
}

.modal-image {
    position:absolute;
    top:5%;
    bottom:5%;
    left:5%;
    width:45%;
    background: url('http://annerileybooks.com/wp-content/uploads/2012/03/Force-Field-LOLCat.jpg') left top no-repeat;
    background-size:contain;
}

.modal-content {
    overflow-x:hidden;
    overflow-y:auto;
    position:absolute;
    top:5%;
    bottom:5%;
    right:5%;
    width:45%;
}

Answer 2

为文本 2

制作 overflow:scroll

CSS 定位：将文本包装在模态框内

CSS Positioning: wrapping text inside a modal

javascript

html

css

css-float

css-position