div沒有調整內容大小

Question

對不起，如果這是一個重複的問題，但我找不到與此有效的完全匹配，所以在這裏。

我有一個網頁與每個數據庫條目divs。但是，div不會用文本調整大小，導致文本顯示在div外。我正在使用bootstrap。我已附加fiddle。 增加小提琴輸出的寬度以查看溢出文字。

目前，我只是在桌面版上工作，但我也必須構建移動版。所以它會更好，如果你能幫助我既:)

下面是我的代碼

.each-entry-box { 
 
    min-height: 80px; 
 
    max-height: 110px; 
 
    width: 80%; 
 
    background: #F5F5F5; 
 
    margin: 10px; 
 
    border-radius: 5px; 
 
    position: relative; 
 
} 
 

 
.each-entry-box-header { 
 
    height: auto; 
 
    width: 100%; 
 
    background: #E6E6FA; 
 
    margin: 0; 
 
    border-radius: 5px; 
 
    border-bottom-left-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
    position: absolute; 
 
    padding: 2px; 
 
} 
 

 
.main-content { 
 
    margin: 15px; 
 
    top: 30px; 
 
    position: relative; 
 
    width: 100%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="each-entry-box"> 
 
    <div class="each-entry-box-header"> 
 
    <div class="col-md-9 customer-name"> 
 
     <i class="glyphicon glyphicon-user glyphicon-class"></i><span>customer name</span> 
 
    </div> 
 
    <div class="col-md-3 added-on"> 
 
     <i class="glyphicon glyphicon-time glyphicon-class"></i><span>time</span> 
 
    </div> 
 
    </div> <!-- each-entry-box-header ends here --> 
 
    <div class="main-content"> 
 
    <div class="col-md-12"> 
 
     <div class="col-md-3 customer-mobile"> 
 
     <i class="glyphicon glyphicon-earphone glyphicon-class"></i><span>mobile number</span> 
 
     </div> 
 
     <div class="col-md-9 customer-email"> 
 
     <i class="glyphicon glyphicon-envelope glyphicon-class"></i><span>No email ID added</span> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
     Material : None 
 
    </div> 
 
    <div class="col-md-12"> 
 
     <div class="col-md-4"> 
 
     XYZ : None 
 
     </div> 
 
     <div class="col-md-4"> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

.main-content不應該有相對位置。對於移動響應樣式，你可以使用col-sm-和col-xs-：

.each-entry-box { 
 
    min-height: 80px; 
 
    max-height: 110px; 
 
    width: 80%; 
 
    background: #F5F5F5; 
 
    margin: 10px; 
 
    border-radius: 5px; 
 
    position: relative; 
 
} 
 

 
.each-entry-box-header { 
 
    height: auto; 
 
    width: 100%; 
 
    background: #E6E6FA; 
 
    margin: 0; 
 
    border-radius: 5px; 
 
    border-bottom-left-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    position: absolute; 
 
    padding: 2px; 
 
} 
 

 
.main-content { 
 
    margin: 15px; 
 
    margin-top: 25px; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="each-entry-box row"> 
 
    <div class="each-entry-box-header"> 
 
    <div class="col-md-9 customer-name col-sm-9 col-xs-8"> 
 
     <i class="glyphicon glyphicon-user glyphicon-class"></i><span>customer name</span> 
 
    </div> 
 
    <div class="col-md-3 added-on col-sm-3 col-xs-4"> 
 
     <i class="glyphicon glyphicon-time glyphicon-class"></i><span>time</span> 
 
    </div> 
 
    </div> <!-- each-entry-box-header ends here --> 
 

 
    <div class="main-content"> 
 
    <div class="col-md-12"> 
 
     <div class="col-md-3 customer-mobile col-sm-3"> 
 
     <i class="glyphicon glyphicon-earphone glyphicon-class"></i><span>mobile number</span> 
 
     </div> 
 
     <div class="col-md-9 customer-email col-sm-9"> 
 

 
     <i class="glyphicon glyphicon-envelope glyphicon-class"></i><span>No email ID added</span> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
     Material : None 
 
    </div> 
 
    <div class="col-md-12"> 
 
     <div class="col-md-4"> 
 
     XYZ : None 
 
     </div> 
 
     <div class="col-md-4"> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

這裏的工作JS Fiddle，

我既浮動的div並刪除絕對定位，我也將背景顏色從父元素更改爲子元素，所以隨着列表的增長，背景也將變爲

HTML：

<div class="each-entry-box"> 
        <div class="each-entry-box-header"> 
         <div class="col-md-9 customer-name"> 
          <i class="glyphicon glyphicon-user glyphicon-class"></i><span>customer name</span> 
         </div> 
         <div class="col-md-3 added-on"> 
          <i class="glyphicon glyphicon-time glyphicon-class"></i><span>time</span> 
         </div> 
        </div> <!-- each-entry-box-header ends here --> 

        <div class="main-content"> 
         <div class="col-md-12"> 
          <div class="col-md-3 customer-mobile"> 
           <i class="glyphicon glyphicon-earphone glyphicon-class"></i><span>mobile number</span> 
          </div> 
          <div class="col-md-9 customer-email"> 

            <i class="glyphicon glyphicon-envelope glyphicon-class"></i><span>No email ID added</span> 

          </div> 
         </div> 
         <div class="col-md-12"> 
          Material : None 
         </div> 
         <div class="col-md-12"> 
          <div class="col-md-4"> 
           XYZ : None 
          </div> 
          <div class="col-md-4"> 
          </div> 
          <div class="col-md-4"> 
          </div> 
         </div> 
        </div> 
       </div> 

CSS：

.each-entry-box{ 
    min-height: 80px; 
    max-height: 110px; 
    width: 80%; 
    background: #F5F5F5; 
    margin: 10px; 
    border-radius: 5px; 
    position: relative; 
} 

.each-entry-box-header{ 
     height: auto; 
    width: 100%; 
    background: #E6E6FA; 
    margin: 0; 
    border-radius: 5px; 
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px; 
    /* position: absolute; */ 
    padding: 2px; 
    float: left; 
    } 

.main-content{ 
      /* margin: 15px; */ 
    /* top: 30px; */ 
    /* position: relative; */ 
    width: 100%; 
    background: #F5F5F5; 
    float: left; 
    clear: left; 
    }