Question

我现在正在努力解决调整大小问题。在我的页面我有一个主div和内部div我有几个div.the主div现在重新调整大小但是当我调整页面时，子div内容已经消失在主div的一侧。带滚动条我怎么能解决这个问题

＆＃13;

 .contentcolumn {
    border-width: 1px;
    border-style: solid;
    margin-left:108px;
    margin-right:48px;
    height: calc(100% - (150px + 50PX));
   
}
        body,html{
            
   
    height: 100%;
        }

＆＃13;

<div class="contentcolumn">
  <div>hai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>hai</div>
    <div>hai</div>
    <div>hai</div>
    <div>hai</div>
    
    <div>hai</div>

＆＃13;

Answer 1

将分词添加到元素

http://www.w3schools.com/cssref/css3_pr_word-break.asp

.contentcolumn {
        border-width: 1px;
        border-style: solid;
        margin-left:108px;
        margin-right:48px;
        height: calc(100% - (150px + 50PX));
       word-break: break-all;
    }

<div class="contentcolumn">
  <div>hai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>
    <div>hai</div>
    <div>hai</div>
    <div>hai</div>
    <div>hai</div>
    
    <div>hai</div>
    
</div>

Answer 2

div确实会调整大小，但由于文本是一个长的不间断字符串，它会溢出div。

解决方案是在word-break: break-all上使用.contentcolumn，这会将溢出的文本移到新行上。

页面调整大小问题。孩子div不像父div

2 个答案: