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

【问题标题】：CSS Positioning: wrapping text inside a modalCSS 定位：在模态框内包装文本
【发布时间】：2015-04-24 23:28:01
【问题描述】：

一个关于 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）右上角的“关闭”按钮

这是模型：

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

我需要允许 Text 1 和 Text 2 中的文本换行，尤其是在 Text 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%;
}

谁能帮我正确配置这个？提前致谢！

【问题讨论】：

不能把模态框的高度改成min-height吗？
另外，span 元素不应包含像标题这样的块级元素。
尝试将文本元素包装在一个 div 中，然后从那里开始，

标签： javascript html css css-float css-position

【解决方案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%;
}

【讨论】：

这太棒了！这正是我一直在寻找的。现在我正在尝试以编程方式设置模态图像，但无济于事。我正在尝试这个：document.getElementById("modalImg").style.background-image = ...
我想通了。在我的 JavaScript 代码中，我简单地调用以下内容： document.getElementById("modalImg").style.backgroundImage = "url('" + record.filePath + "')";
好的，还有一个问题。我刚刚意识到您已将模式中的图像设置为固定宽度。如何更改以使图像的高度始终是模态的高度，而宽度与之成正比？我尝试从'width：45％'更改css def；到“高度：100%；宽度：自动；”但这没有用......
我希望您意识到可能会发生重叠？因此，例如图像会低于文本？如果是，那么不要使用图像背景，只需使用 img 标签并将其设置为 .image {position:absolute; top:10%;bottom:10%;left:10%;width:auto;}
有没有办法通过设置 modal-content 容器的样式属性来限制重叠，使其始终与图像末尾对齐。换句话说，无论图像在哪里结束，将 modal-content div 显示在右侧 10 像素处？

【解决方案2】：

制作溢出：为 text2 滚动

【讨论】：