【问题标题】：Break row after reaching end of DIV container到达 DIV 容器末尾后换行
【发布时间】：2017-06-18 00:20:57
【问题描述】：

我有以下代码从数据库中获取图像。它不断打破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;
}

【问题讨论】：

你试过.image-container {display: inline-block;} 吗？我认为您需要为inline-flex 设置宽度。
是的，我做到了..但它没有工作......！
inline-flex 的宽度设置为 100%
你能显示页面的css样式表吗？
完成@SuperBoy .. :)

标签： javascript php jquery html css

【解决方案1】：

尝试使用显示：table

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

【讨论】：

【解决方案2】：

您需要将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>

【讨论】：

【解决方案3】：

我找到了解决方案的答案。添加了一个额外的 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>

【讨论】：