多个div一行显示，超出的自动排列到下一行

迈不过友情╰ 2021-12-18 05:35 584阅读 0赞

<div style="width: 600px;">
     	<div style="display: inline-block;width: 100px;margin-left: 17px;margin-top: 10px"">
            <img style="width: 100%;height: 100%; :src="billImg.orderImg">
            <p style="margin-left: 50%">1</p>
        </div>
        <div style="display: inline-block;width: 100px;margin-left: 17px;margin-top: 10px"">
            <img style="width: 100%;height: 100%; :src="billImg.orderImg">
            <p style="margin-left: 50%">2</p>
        </div>
        <div style="display: inline-block;width: 100px;margin-left: 17px;margin-top: 10px"">
            <img style="width: 100%;height: 100%; :src="billImg.orderImg">
            <p style="margin-left: 50%">3</p>
        </div>
        <div style="display: inline-block;width: 100px;margin-left: 17px;margin-top: 10px"">
            <img style="width: 100%;height: 100%; :src="billImg.orderImg">
            <p style="margin-left: 50%">4</p>
        </div>
    <div>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70][]

说明： 如果不加下面的图片排序 样式写成 display:  inline；就可以了；

但是要加<p>标签用于图片排序的话就要改成   display: inline-block;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70]: /images/20211218/7ef5001cbd0e4ab495819974b85cc969.png

发表评论取消回复

表情：

评论列表（有 0 条评论，584人围观）

还没有评论，来说两句吧...

相关阅读

相关一行多个div_如何用一行CSS分别实现10种常见布局？

![269ff71d6b9d23f816a91b3f33ca9101.png][] 英文 | http://1linelayouts.glitch.me/ 译文 | https

水深无声/ 2023年01月06日 04:22/ 0 赞/ 109 阅读

相关 css文字超出一行就显示省略号

1，css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:

水深无声/ 2022年12月27日 04:56/ 0 赞/ 256 阅读

相关一行显示多个div 并居中显示

代码：主要是样式：display:table-cell; <style> .primary_button { border-styl

墨蓝/ 2022年09月21日 01:28/ 0 赞/ 216 阅读

相关一行显示4个，超出自动换行（解决办法）

先看一下问题吧 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2S6KGr5oqY5om

蔚落/ 2022年09月12日 01:55/ 0 赞/ 191 阅读

相关一行div框，两边顶头显示

<style> .pdiv{background-color:999; width:1000px; height:500px; overflow:hidden;

偏执的太偏执、/ 2022年07月27日 10:45/ 0 赞/ 166 阅读

相关超出文本显示省略号（包括一行和多行）

文本只有一行 \{ white-space:nowrap; text-overflow:ellipsis; \} 文本有多行（PC端会有兼容性） \{

系统管理员/ 2022年07月24日 08:09/ 0 赞/ 213 阅读

相关 css控制超出一行内容显示省略号

前言：在前端开发过程中，经常会遇到文字超过一行内容的情况，要求隐藏超出部分并且以省略号显示。解决方法：使用以下css代码即可解决这个需求： whi

矫情吗；*/ 2022年05月17日 12:21/ 0 赞/ 512 阅读

相关多个div一行显示，超出的自动排列到下一行

<div style="width: 600px;"> <div style="display: inline-block;width: 100px;mar

迈不过友情╰/ 2021年12月18日 05:35/ 0 赞/ 585 阅读

相关多个div在一个div中一行水平显示

1.使用 inline-block .an{ display: inline-block; }

小鱼儿/ 2021年09月27日 11:26/ 0 赞/ 390 阅读

相关 css 实现div内显示一行或两行，超出部分用省略号显示

div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overf

深碍√TFBOYSˉ_/ 2021年08月19日 14:32/ 0 赞/ 483 阅读