div没有调整内容大小

Question

很抱歉，如果这是一个重复的问题，但我找不到与此相符的完全匹配，那么就这样了。

我有一个网页，每个数据库条目都有div。但是，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-：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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