我有以下代码从数据库中提取图像。它不断突破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">×</span> <img class="modal-content" id="modalImg">
<div id="caption"></div>
</div>
<?php } ?>
</div>
.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;
}
答案 0 :(得分:0)
尝试使用display: table
.inline-flex {
width: 100%;
display: table;
}
答案 1 :(得分:0)
您需要将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%;
}
&#13;
<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>
&#13;
答案 2 :(得分:0)
我找到了解决方案的答案。添加了包含属性.proof-container
的类position: relative;
的额外DIV,并将所有元素包含在其中,并向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">×</span> <img class="modal-content" id="modalImg">
<div id="caption"></div>
</div>
<?php } ?>
</div>