мой контент div неуместен, когда его содержимое увеличивается

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

мой код ниже

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Bootstrap Test</title> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<style> 

    body 
    { 
     font-family:Arial, Helvetica, sans-serif; 
     font-size:14px; 
     font-weight:400; 
     color:#fff; 
    } 
    .main-body 
    { 
     margin-top:100px; 
    } 
    .back1, .back2, .back3{padding:15px; margin-bottom:30px;} 
    .back1{background:#f1c40f;} 
    .back2{background:#2ecc71;} 
    .back3{background:#3498db;} 

</style> 

</head> 



<body> 

<div class="main-body"> 

    <div class="container"> 

    <div class="row"> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back1"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back2"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back3"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back1"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back2"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back3"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 


    </div>  

    </div><!--container closed-->  

</div><!--main-body closed-->  

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

</body> 
</html>

источник

2015-09-29 Nabraj Bhattarai

У вас не хватает другой DIV с классом '.row' на последних трех столбцах. – DavidDomain

Вы должны создать новую строку DIV для каждого ряда. В настоящее время вы поместили все 6 дочерних div в одну строку. Держите 3 в одной строке и еще 3 секунды. Ниже приведен код обновления. Надеюсь это поможет.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Bootstrap Test</title> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<style> 

    body 
    { 
     font-family:Arial, Helvetica, sans-serif; 
     font-size:14px; 
     font-weight:400; 
     color:#fff; 
    } 
    .main-body 
    { 
     margin-top:100px; 
    } 
    .back1, .back2, .back3{padding:15px; margin-bottom:30px;} 
    .back1{background:#f1c40f;} 
    .back2{background:#2ecc71;} 
    .back3{background:#3498db;} 

</style> 

</head> 



<body> 

<div class="main-body"> 

    <div class="container"> 

    <div class="row"> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back1"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back2"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back3"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 

    </div> 
    <div class="row"> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back1"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back2"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 

     <div class="col-sm-4 col-md-4 col-xs-12"> 

      <div class="back3"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
      </div> 

     </div> 


    </div>  

    </div><!--container closed-->  

</div><!--main-body closed-->  

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

</body> 
</html>

Чтобы иметь все разделители фиксированной высоты, вы можете выбрать одно из следующих решений. Это поможет обрабатывать динамический текст. Решение 1

.back1, .back2, .back3 { 
    padding: 15px; 
    margin-bottom: 30px; 
    min-height: 300px; 
}

Решение 2

.back1, .back2, .back3 { 
    height: 300px; 
    overflow: scroll; 
}

источник

2015-09-29 07:21:47 Ranjana

Большое спасибо за ваш ответ, но мне не нужно именно то, что вы сделали. Здесь первый div и третий div занимают больше места на дне, я хочу, чтобы все div занимали одно и то же поле. Можете ли вы ответить мне, как это возможно? –

margin bottom уже применяется bootstraps css. Вы можете сделать это, предоставив высоту вашему div. Plz см. Обновленный ответ. – Ranjana

Проверить этот фрагмент ..

ИЛИ

Если вы хотите, чтобы все div быть исправлены height чем добавить height к .back1, .back2, .back3

body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    color: #fff; 
 
} 
 
.main-body { 
 
    margin-top: 100px; 
 
} 
 
.back1, 
 
.back2, 
 
.back3 { 
 
    padding: 15px; 
 
    margin-bottom: 30px; 
 
} 
 
.back1 { 
 
    background: #f1c40f; 
 
} 
 
.back2 { 
 
    background: #2ecc71; 
 
} 
 
.back3 { 
 
    background: #3498db; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Bootstrap Test</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="style.css" /> 
 

 
</head> 
 

 

 

 
<body> 
 

 
    <div class="main-body"> 
 

 
    <div class="container"> 
 

 
     <div class="row"> 
 

 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back1"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.Donec pede justo, fringilla vel, aliquet nec, vulputate 
 
       eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 

 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back2"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium 
 
       quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 

 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back3"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back1"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium 
 
       quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 

 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back2"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 

 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back3"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 

 

 
     </div> 
 

 
    </div> 
 
    <!--container closed--> 
 

 
    </div> 
 
    <!--main-body closed--> 
 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
</body> 
 

 
</html>

fixed Отрывок с высоты ..

body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    color: #fff; 
 
} 
 
.main-body { 
 
    margin-top: 100px; 
 
} 
 
.back1, 
 
.back2, 
 
.back3 { 
 
    padding: 15px; 
 
    margin-bottom: 30px; 
 
    height:200px; 
 
} 
 
.back1 { 
 
    background: #f1c40f; 
 
} 
 
.back2 { 
 
    background: #2ecc71; 
 
} 
 
.back3 { 
 
    background: #3498db; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Bootstrap Test</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="style.css" /> 
 

 
</head> 
 

 

 

 
<body> 
 

 
    <div class="main-body"> 
 

 
    <div class="container"> 
 

 
     <div class="row"> 
 

 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back1"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.Donec pede justo, fringilla vel, aliquet nec, vulputate 
 
       eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 

 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back2"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium 
 
       quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 

 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back3"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back1"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec quam felis, ultricies nec, pellentesque eu, pretium 
 
       quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 

 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back2"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 

 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
 

 
      <div class="back3"> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, 
 
       pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
 
      </div> 
 

 
     </div> 
 

 

 
     </div> 
 

 
    </div> 
 
    <!--container closed--> 
 

 
    </div> 
 
    <!--main-body closed--> 
 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
</body> 
 

 
</html>

источник

2015-09-29 07:27:14

Возможно ли, если вы дадите высоту этим divs? –

Я не думаю, что без 'высоты' можно –

мой контент div неуместен, когда его содержимое увеличивается

ответ

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