Javascript CSS定位：在模式中包装文本

一个相对（我希望）简单的关于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） 右上角有一个“关闭”按钮

这是模型：

我的问题是，当文本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>

---

有人能帮我正确配置吗？提前谢谢

你在找这样的东西吗

---

使溢出：滚动文本2

难道不能将模式的高度更改为

min height

？此外，

span

元素不应包含块级元素，如标题。尝试将文本元素包装在div中，然后从那里开始，这很好！这正是我要找的。现在，我试图以编程方式设置模式图像，但没有效果。我正在尝试：document.getElementById（“modalImg”）.style.background-image=…我找到了答案。在我的JavaScript代码中，我只需调用以下内容：document.getElementById（“modalImg”）.style.backgroundImage=“url”（“+record.filePath+”）”；好的，还有一个问题。我刚刚意识到，您已将模式中的图像设置为固定宽度。如何更改图像的高度，使其始终为模态的高度，并且宽度与此成比例？我尝试将css定义从“宽度：45%”更改；身高：100%；宽度：自动；'但那没用…我希望你意识到重叠可能会发生？例如，图像将位于文本下方？如果是，那么只需使用img标记而不是图像背景，并按照这样设置样式即可。image{position:absolute；top:10%；bottom:10%；left:10%；width:auto；}是否有方法通过设置模式内容容器的样式属性来限制重叠，使其始终与图像的末尾对齐。换句话说，无论图像在哪里结束，都要在右侧显示模式内容div 10像素？

.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%;
}

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%;
}