0

有没有办法防止 DIV 从动态归档内容中删除？当内容足够大时，它会保持全宽并且可以很好地缩放，但是当它很小时，它会从顶部组中分离出来。

这是我的 html 和 css 的副本：

<style>
#title{
font-family: Arial;
font-size: 1.5em;
font-weight: bold;
text-align: center;
background: beige;
padding: 7px 50px 7px 50px;
margin: 10px 0px 0px 0px;       /* L&R margins need to be 0px */
}

#box1{                          /* Outer Box */
float: left;
font-size: 1em;
text-align: justify;
background: beige;
margin: 0px;            /* L&R margins need to be 0px */
padding: 0px 50px 10px 50px;
}

#box2{                  /* Inner Box */
font-family: Arial;
float: right;
width: 50%;
font-weight: bold;
font-size: 1em;
text-align: justify;
background: beige;
margin: 0px;            /* L&R margins need to be 0px */
padding: 0px 0px 0px 50px;
display: block;
}

#box3{                  /* Footnotes */
margin: 0px;            
float: left;
font-size: 1em;
text-align: justify;
background: beige;
padding: 0px 50px 30px 50px;
border-radius: 0px 0px 15px 15px;
}

#footnote_columns{
display: block;
overflow:hidden;
/*columns: auto auto;   /* column-count: auto column-width: auto; */
column-fill: balance;   /* not working!!! */
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-width: auto;
-moz-column-width: auto;
-webkit-column-width: auto;
column-gap: 2em;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
}
</style>
<!-- ====================== Page Title ===================== -->
            <div id='title'>
                <HR>
                'Title' centered & full width
                <HR>
            </div>
<!-- ============ text box inside text box ================ -->
                <div id="box1">             <!-- Left Side -->
                    <div id="box2">         <!-- Right Side -->
                        <p>
                        INNER Box2 text: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed nibh eu velit iaculis auctor non ac magna. In at enim quis mi aliquam vestibulum imperdiet eu magna. Ut aliquet arcu at felis dapibus euismod. Suspendisse dolor turpis, faucibus quis mollis vitae, iaculis vel urna. Integer sit amet dui malesuada justo facilisis rutrum sed vel neque. Cras condimentum est sit amet mi dapibus convallis. Donec molestie euismod velit id pharetra. Praesent sit amet eros at quam ullamcorper sodales. Aenean ligula dui, ultricies quis commodo ut, lobortis eu justo. Nulla dolor augue, vulputate at placerat in, ornare et purus. " 
                        </p>
                        <HR>
                    </div>
                        <p>
                        OUTER Box1 text: " Etiam at pretium urna. Morbi condimentum consequat nisi, nec pulvinar tellus fermentum at. Cras ut sodales ante. Sed feugiat sem eget eros lobortis sit amet porttitor mauris tempus. Sed eros est, placerat at sollicitudin quis, scelerisque ac dolor. Proin mollis euismod condimentum. Morbi eget tortor justo, eu vestibulum orci. Pellentesque eu ante a nunc adipiscing sodales dictum vitae eros. Sed tellus mauris, volutpat non vulputate ut, vulputate ut orci. Vivamus facilisis ipsum a tellus gravida pellentesque. Nam risus magna, eleifend dignissim porttitor et, sagittis quis nisl.

                        Sed eget lorem magna. Sed sed imperdiet elit. Sed vulputate dapibus tellus, nec scelerisque risus hendrerit quis. Fusce aliquet erat non nibh egestas posuere. Aliquam ipsum velit, venenatis vel dictum ac, luctus nec sapien. In hac habitasse platea dictumst. Vivamus a elit augue. Integer pellentesque enim sit amet sem condimentum ut tincidunt nunc mollis. Cras in tellus eget dui pellentesque adipiscing. In varius ullamcorper felis, vitae sagittis turpis rutrum in. Aliquam consectetur consectetur erat, quis tristique magna laoreet id. Etiam orci arcu, ultricies eget interdum non, mollis quis est. Mauris odio lacus, tempus at porta quis, laoreet porta tortor. "
                    <HR>
                </div>
                <div id='box3'>
                        <div id='footnote_columns'>
                        <p>
                        FOOTNOTE Box3 text: " Vivamus egestas tempor molestie. Morbi scelerisque nunc non eros ultrices volutpat. Suspendisse potenti. Sed lobortis, odio vitae pharetra dapibus, risus turpis scelerisque risus, a dapibus dui ante sed ante.   "
                        </p>
                        </div>
                    <HR>
                </div>
<!-- ======================================================= -->

示例 1 有效 - 有很多 txt -

示例 2 中断 - 缩放时 -

(1) http://jsfiddle.net/NuxWD/1/ - 全文

(2) http://jsfiddle.net/NuxWD/2/ - 尝试缩放，注意脚注

(3) http://jsfiddle.net/NuxWD/3/ - 脚注中的少量txt

(4) http://jsfiddle.net/NuxWD/4/ (5) http://jsfiddle.net/NuxWD/5/ - 一切都崩溃了！

动态内容需要这个。如果我在示例 (4) 中删除 BR，则框架保持正常；

即使段落很短，框架如何保持全宽？

  • 注意底行，脚注，尝试调整txt的数量；或缩小

IE 甚至根本不列脚注。

为什么无论是文本量少还是缩小，标题都不受影响？

4

0 回答 0