Разрыв строки после достижения конца контейнера DIV

Question

У меня есть следующий код, в котором изображения извлекаются из базы данных. Он продолжает ломать DIV и overflows. Я хочу, чтобы изображения достигли конца DIV, и он должен сломаться и начать новую строку. Но я понятия не имею, как это сделать. Пожалуйста, помогите мне, ребята.

Код

<div class="inline-flex"> 
    <?php while($faf = $prooq->fetch()){ extract($faf); ?> 
     <div class="image-container"> <img class="myThumb" id="myImg" src="proofs/<?php echo $pr_image; ?>" alt="" width="160" height="100"> 
      <div class="image-text">shreyansh ($8.75)<br> 
      <span><?php echo date('jS M, Y (h:i a)', strtotime($pr_uptime)); ?></span></div> 
     </div> 
     <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="modalImg"> 
      <div id="caption"></div> 
     </div> 
    <?php } ?> 
</div> 

CSS

.image-container { 
    width: 163px; 
    height: 100px; 
    padding: 0px 0px 65px 0px; 
    font-size: 12px; 
    text-align: center; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    margin-right: 13px; 
} 

.image-text { 
    margin-top: 5px; 
} 
.image-text span { 
    color: #ddd; 
    font-size: 9px; 
} 
.inline-flex { 
    width: 100%; 
    display: inline-flex; 
} 

Answer 1

Я нашел ответ на мое решение. Добавлен дополнительный DIV с классом .proof-container с свойством position: relative; и обернут все элементы внутри него и добавили свойство float: left; в .image-container. Вот и все. Ниже приведен код:

CSS:

.image-container { 
    width: 197px; 
    height: 120px; 
    padding: 0px 0px 65px 0px; 
    font-size: 12px; 
    text-align: center; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    margin-right: 10px; 
    float: left; 
} 

.proof-container { 
    width: 100%; 
    position: relative; 
} 

HTML:

<div class="proof-container"> 
     <?php while($faf = $prooq->fetch()){ extract($faf); ?> 
     <div class="image-container"> 
      <img class="myThumb" id="myImg" src="proofs/<?php echo $pr_image; ?>" alt="" width="160" height="100"> 
      <div class="image-text"><?php echo $mem_uname; ?> ($8.75)<br> 
      <span><?php echo date('jS M, Y (h:i a)', strtotime($pr_uptime)); ?></span></div> 
     </div> 
     <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="modalImg"> 
      <div id="caption"></div> 
     </div> 
     <?php } ?> 
     </div> 

Answer 2

Попробуйте использовать дисплей: стол

.inline-flex { 
    width: 100%; 
    display: table; 
} 

Answer 3

Вам нужно установить display: inline-block; float: left; в .image-container

.image-container { 
 
    width: 163px; 
 
    height: 120px; 
 
    padding: 0px 0px 65px 0px; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
 
    margin-right: 13px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.image-text { 
 
    margin-top: 5px; 
 
} 
 
.image-text span { 
 
    color: #ddd; 
 
    font-size: 9px; 
 
} 
 
.inline-flex { 
 
    width: 100%; 
 
}

<div class="inline-flex"> 
 
    <div class="image-container"> <img class="myThumb" id="myImg" src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg" alt="" width="160" height="100"> 
 
      <div class="image-text">shreyansh ($8.75)<br> 
 
      <span>date('jS M, Y (h:i a)', strtotime($pr_uptime));</span></div> 
 
     </div> 
 
     </div> 
 
    <div class="image-container"> <img class="myThumb" id="myImg" src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg" alt="" width="160" height="100"> 
 
      <div class="image-text">shreyansh ($8.75)<br> 
 
      <span>date('jS M, Y (h:i a)', strtotime($pr_uptime));</span></div> 
 
     </div> 
 
    <div class="image-container"> <img class="myThumb" id="myImg" src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg" alt="" width="160" height="100"> 
 
      <div class="image-text">shreyansh ($8.75)<br> 
 
      <span>date('jS M, Y (h:i a)', strtotime($pr_uptime));</span></div> 
 
     </div> 
 
    <div class="image-container"> <img class="myThumb" id="myImg" src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg" alt="" width="160" height="100"> 
 
      <div class="image-text">shreyansh ($8.75)<br> 
 
      <span>date('jS M, Y (h:i a)', strtotime($pr_uptime));</span></div> 
 
     </div> 
 
    <div class="image-container"> <img class="myThumb" id="myImg" src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg" alt="" width="160" height="100"> 
 
      <div class="image-text">shreyansh ($8.75)<br> 
 
      <span>date('jS M, Y (h:i a)', strtotime($pr_uptime));</span></div> 
 
     </div> 
 
    <div class="image-container"> <img class="myThumb" id="myImg" src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg" alt="" width="160" height="100"> 
 
      <div class="image-text">shreyansh ($8.75)<br> 
 
      <span>date('jS M, Y (h:i a)', strtotime($pr_uptime));</span></div> 
 
     </div>