1. дома
  2. Вопрос и ответ
  3. div без изменения размера

div без изменения размера

2016-12-07 4 views
0

Извините, если это дублирующийся вопрос, но я не смог найти точное совпадение с тем, что сработало, так что вот оно.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>

источник

2016-12-07 mrid

+1

Вот [изменяемый текст внутри DIV] (http://stackoverflow.com/questions/6112660/how-to-automatically-change-the-text-size -inide-a-div) из самого StackOverflow. –

+0

удалите 'max-height' из' .each-entry-box' – Rohit

+0

@Subham, мой вопрос - полная противоположность этому. Я хочу, чтобы мой div увеличивался в высоту, когда мой текст переполнялся. – mrid

ответ

0

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

источник

2016-12-07 04:31:05

+0

. Pls добавит пояснения для вашего ответа. –

+0

@MandeepJain, добавлено объяснение –

+0

Спасибо. Это помогает улучшить качество ответа. :) –

0

Вот рабочий JS Fiddle,

Я плавал как дивы и удалили абсолютное позиционирование, я также изменил цвет фона с родительского элемента на дочерний элемент, так как список растет, фон тоже будет

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

источник

2016-12-07 04:36:18

+0

спасибо @Gerard, но когда я помещал больше контента в '.main-content', он все еще выглядит грязным ... см. Https://jsfiddle.net/d93u1kv0/2/ – mrid

+0

Это лишний контент, кажется, не внутри столбца, и поэтому не имеет дополнения, то почему он грязный? –

+0

проверить это сейчас https://jsfiddle.net/d93u1kv0/3/ – mrid

Смежные вопросы

 Смежные вопросы