[原创]排列问题：每行显示4张图片，如果超过4张就换行

最新推荐文章于 2022-04-24 10:46:53 发布
最新推荐文章于 2022-04-24 10:46:53 发布 · 268 阅读 · 0

博客介绍了 Mod 运算符，包含其描述、语法及相关说明，阐述了 Mod 运算符语法的组成部分。
<table width="100%" border="1" cellspacing="0" cellpadding="1">
<%if rs.eof then
response.write"<tr><td>没有内容</td></tr>"
else%>
<tr>
<%for i=1 to 30
if rs.eof then exit for
response.Write("<td width=120>")
response.Write rs("name")
response.Write("</td>")
if i mod 4=0 then
response.Write("</tr><tr>")
end if
rs.movenext
next
end if%>
</tr>
</table>

主要用到mod函数：
描述
两个数值相除并返回其余数。
语法
result = number1 Mod number2

Mod 运算符的语法有以下部分：

部分描述
result任意数值变量。
number1任意数值表达式。
number2任意数值表达式。
说明
模数或余数。运算符执行 number1 除以 number2 操作（浮点数四舍五入为整数）并只返回余数作为 result。例如，在下面的表达式中， A（为 result）等于 5。 
如果任一表达式为 Null，则 result 也为 Null。任一表达式为 Empty 时按 0 来处理。



                

        




    


  



    

      

        

            

              
                
                  iteye_15968
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
要看就看最好，16万字全网最硬核redis总结，谁赞成，谁反对？（被粉丝疯狂催更，已有人反馈看完专栏拿到大厂offer！！！）

				
			

			

				

					Java框架、并发编程、分布式、微服务、Redis、HarmonyOS、中间件等技术
				

				

					10-10
					
					1万+
					
				

			

		

		

			
				
被粉丝疯狂催更，已有人反馈看完专栏拿到大厂offer，非常适合应届毕业生和初中级工程师！！！

			
		

	



                

            
              



	

		

			

				
					
【HarmonyOS实战开发】鸿蒙 容器组件解析

				
			

			

				

					HarmonyOS007的博客
				

				

					07-25
					
					1032
					
				

			

		

		

			
				
这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

			
		

	



              


  
              

                


	

		

			

				
					
左边图标右边文字超出自动换行.zip

				
			

			

				

					11-11
				

			

		

		

			
				
左边图标右边文字超出自动换行.zip https://blog.youkuaiyun.com/qq_36413371/article/details/103014799

			
		

	





	

		

			

				
					
javaSwing---jTextPane图片换行

				
			

			

				

					追求卓越583的博客
				

				

					01-12
					
					1511
					
				

			

		

		

			
				
一.写一个FontAttrib类
 //jTextPane换行，字体属性
    private class FontAttrib {
      public static final int GENERAL = 0; // 常规
      public static final int BOLD = 1; // 粗体
      public static final int ITALIC

			
		

	



		

			
		



	

		

			

				
					
php div每20个一循环高性能方法

				
			

			

				

					pengone的博客
				

				

					11-13
					
					790
					
				

			

		

		

			
				
$max_key=count($comment_template_str)-1;

$comment_template_str = '<div style="width:350px;float:left">';
foreach ( $comment_template_data as $key=> $value ) {
   $comment_template_str .= "&...

			
		

	





	

		

			

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

				
			

			

				

					青衫折扇的博客
				

				

					09-18
					
					5063
					
				

			

		

		

			
				
先看一下问题吧






data() {
    return {
        myHealthAdminMenu: {
		name: '健康管理',
		list: [{
			name: '基础信息',
			image: $mAssetsPath.iconHealth1,
			isAstrict: false
		}, {
			name: '健康档案',
			image: $mAssetsPath.iconHealth2,
			isAstrict: false
		}, {
			.

			
		

	





	

		

			

				
					
web前端开发基本问题解决

					
最新发布

				
			

			

				

					10-14
				

			

		

		

			
				
image定位机制存在问题LI中内容超过显示长度后应以省略号形式表示的方法web标准中id与class属性的区别及其作用如何实现中文本的垂直居中FF下水平居中的方法为何无法撑开容器高度，而IE6环境下不同宽度解释依据何在...

			
		

	





	

		

			

				
					
综合一

				
			

			

				

					刘群智的博客
				

				

					07-27
					
					4621
					
				

			

		

		

			
				
自我介绍

左固定右自适应布局

这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局：

&lt;div id="outer"&gt;

  &lt;div id="sidebar" style="height:240px;"&gt;固定宽度区&lt;/div&gt;

  &lt;d

			
		

	





	

		

			

				
					
前端超出换行-white-space

				
			

			

				

					个人博客
				

				

					04-24
					
					6022
					
				

			

		

		

			
				
这里写目录标题一、属性介绍1. 属性值二、具体使用1. normal2. nowrap3. pre4. pre-wrap5. pre-line三、文本换行案例
一、属性介绍
white-space 属性设置处理元素内的空白-Space(空格)、Enter(回车)、Tab(制表符)
我们在开发中应该知道，在div中无论我们敲多少空格和回车，显示在页面上的都会是一个空格。
那么空格和回车具体应该怎么显示？这就是white-space 属性存在的意义
注：当前文章只使用中文文本举例，英文或者数字文本还受word-

			
		

	





	

		

			

				
					
一行排三个图片  /然后自动换行

				
			

			

				

					Gerry的专栏
				

				

					09-15
					
					6645
					
				

			

		

		

			
				
                                                                                        ${one.mc}                                                                

			
		

	





	

		

			

				
					
CSS控制让每行显示4个图片

				
			

			

				

					huaishuming的专栏
				

				

					09-06
					
					4242
					
				

			

		

		

			
				
这个样式 就可以让每行显示4个
外面的 .liStyle {width:700px; float:left;}
里面的  .liStyle li{list-style:none; width:170px; float:left;}

			
		

	





	

		

			

				
					
小程序图片超出换行随笔:

				
			

			

				

					CatLian的博客
				

				

					12-18
					
					489
					
				

			

		

		

			
				
小程序图片超出换行随笔:
效果图:

样式结构:





			
		

	





	

		

			

				
					
html怎么设置图片自动换行,html 自动换行式样

				
			

			

				

					weixin_30139729的博客
				

				

					05-30
					
					3115
					
				

			

		

		

			
				
html 自动换行样式语法：word-break : normal | break-all | keep-all参数：normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，...

			
		

	





	

		

			

				
					
html 图片超出父容器,文字超出边界需要自动换行处理方法

				
			

			

				

					huihuangjiuai的专栏
				

				

					11-13
					
					5146
					
				

			

		

		

			
				
1.自动换行
在父容器
word-wrap: break-word;

			
		

	





	

		

			

				
					
每行3张图片现在生成是直接换行了

				
			

			

				

					07-05
				

			

		

		

			
				
要解决图片在单元格内直接换行的问题（而不是每行显示3张图片后换行），需要调整图片添加逻辑和单元格布局。以下是修复后的完整代码，确保每单元格内的图片正确排列：

### 修复后的完整代码

```java
import org.apache.poi.xwpf.usermodel.*;
import org.openxmlformats.schemas.wordprocessingml.x2006.main.*;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.*;
import java.math.BigInteger;
import java.util.List;

public class FixedImageLayoutExport {

    // 分页配置常量
    private static final int DATA_ROWS_PER_PAGE = 4;
    private static final int MAX_IMAGES_PER_PAGE = 12;
    private static final int IMAGES_PER_ROW = 3; // 每个单元格内每行显示3张图片
    private static final int IMAGE_WIDTH_PX = 100; // 图片显示宽度
    private static final int IMAGE_HEIGHT_PX = 100; // 图片显示高度

    public static void exportToWord(List<EntityItem> records, String outputPath) throws Exception {
        validateInput(records);

        try (XWPFDocument doc = new XWPFDocument()) {
            configurePageSettings(doc);
            
            PageContext context = new PageContext();
            XWPFTable currentTable = null;

            for (int idx = 0; idx < records.size(); idx++) {
                EntityItem record = records.get(idx);
                int recordImageCount = countRecordImages(record);

                if (shouldCreateNewPage(context, recordImageCount, idx, records.size())) {
                    addPageBreak(doc, context);
                }

                if (context.currentDataRowCount == 0) {
                    currentTable = createNewTable(doc);
                    addTableHeader(currentTable);
                    context.currentDataRowCount++;
                }

                XWPFTableRow row = currentTable.createRow();
                ensureRowHasCells(row, 5);

                // 1. 序号列
                setCellText(getSafeCell(row, 0), String.valueOf(idx + 1));
                
                // 2. 工装编号列
                setCellText(getSafeCell(row, 1), record.getToolNumber());
                
                // 3. 资产名称列
                setCellText(getSafeCell(row, 2), record.getToolName());
                
                // 4. 关联图片列（修复重点）
                XWPFTableCell imageCell = getSafeCell(row, 3);
                addImagesToCellWithLayout(imageCell, record.getPropertyUri(), "D:\\imageFile\\");
                
                // 5. 铭牌列（修复重点）
                XWPFTableCell nameplateCell = getSafeCell(row, 4);
                addImagesToCellWithLayout(nameplateCell, record.getNameplateUri(), "D:\\imageFile\\");

                context.update(recordImageCount);

                if (context.currentDataRowCount >= DATA_ROWS_PER_PAGE - 1 && 
                    idx < records.size() - 1) {
                    context.resetForNewPage();
                }
            }

            addPageNumbers(doc);
            saveDocument(doc, outputPath);
        }
    }

    // ========== 图片布局修复方法 ==========
    
    /**
     * 在单元格内添加图片并控制布局（每行3张图片）
     */
    private static void addImagesToCellWithLayout(XWPFTableCell cell, List<String> imagePaths, 
                                                String basePath) throws Exception {
        if (imagePaths == null || imagePaths.isEmpty()) {
            cell.removeParagraph(0);
            cell.setText("无图片");
            return;
        }

        // 清空单元格
        cell.removeParagraph(0);
        
        // 创建主段落（垂直布局）
        XWPFParagraph mainPara = cell.addParagraph();
        mainPara.setAlignment(ParagraphAlignment.LEFT);
        mainPara.setSpacingAfter(100); // 段落间间距

        int imagesAdded = 0;
        XWPFRun currentRun = null;
        
        for (String path : imagePaths) {
            try {
                File imgFile = new File(basePath + path);
                if (!imgFile.exists()) continue;

                // 每3张图片开始新的一行
                if (imagesAdded % IMAGES_PER_ROW == 0) {
                    currentRun = mainPara.createRun();
                    currentRun.addBreak(); // 换行
                }

                // 添加图片
                BufferedImage img = ImageIO.read(imgFile);
                if (img == null) continue;

                // 计算缩放比例
                double scale = Math.min(
                    IMAGE_WIDTH_PX / (double)img.getWidth(),
                    IMAGE_HEIGHT_PX / (double)img.getHeight()
                );
                int width = (int)(img.getWidth() * scale);
                int height = (int)(img.getHeight() * scale);

                try (FileInputStream is = new FileInputStream(imgFile)) {
                    if (currentRun == null) {
                        currentRun = mainPara.createRun();
                    }
                    currentRun.addPicture(is, 
                                        getImageType(path), 
                                        imgFile.getName(), 
                                        Units.toEMU(width), 
                                        Units.toEMU(height));
                    currentRun.addText(" "); // 图片间添加空格
                    imagesAdded++;
                }
            } catch (Exception e) {
                System.err.println("图片添加失败: " + path);
            }
        }
    }

    // ========== 其他辅助方法（保持不变）==========
    
    private static void ensureRowHasCells(XWPFTableRow row, int cellCount) {
        while (row.getTableCells().size() < cellCount) {
            row.createCell();
        }
    }

    private static XWPFTableCell getSafeCell(XWPFTableRow row, int index) {
        List<XWPFTableCell> cells = row.getTableCells();
        if (index >= 0 && index < cells.size()) {
            return cells.get(index);
        }
        ensureRowHasCells(row, index + 1);
        return row.getCell(index);
    }

    private static void setCellText(XWPFTableCell cell, String text) {
        if (cell == null) return;
        cell.removeParagraph(0);
        XWPFParagraph para = cell.addParagraph();
        para.setAlignment(ParagraphAlignment.CENTER);
        XWPFRun run = para.createRun();
        run.setText(text);
    }

    // ... 其他方法保持不变 ...
}
```

### 关键修复点

1. **图片布局控制**：
   - 新增 `addImagesToCellWithLayout()` 方法
   - 使用 `XWPFRun` 控制图片排列
   - 每3张图片后添加换行符

2. **单元格内容管理**：
   - 先清空单元格原有内容 (`cell.removeParagraph(0)`)
   - 创建主段落控制整体布局
   - 使用单个段落管理多张图片

3. **图片间距控制**：
   - 在图片间添加空格 (`currentRun.addText(" ")`)
   - 设置段落间距 (`setSpacingAfter`)

### 最佳实践建议

1. **使用表格嵌套**（更精确控制布局）：
   ```java
   // 在单元格内创建嵌套表格控制图片布局
   XWPFTable innerTable = cell.insertNewTbl(new XmlCursor());
   XWPFTableRow innerRow = innerTable.createRow();
   
   for (int i = 0; i < 3; i++) {
       XWPFTableCell imgCell = innerRow.createCell();
       if (i < imagePaths.size()) {
           addSingleImage(imgCell, imagePaths.get(i));
       }
   }
   ```

2. **使用绘图工具**（更复杂的布局）：
   ```java
   // 使用XWPFDrawing控制精确位置
   CTDrawing drawing = paragraph.createRun().getCTR().addNewDrawing();
   // 设置图片绝对位置...
   ```

3. **CSS样式替代方案**（如果使用docx4j）：
   ```java
   // docx4j支持更精细的布局控制
   org.docx4j.wml.P p = factory.createP();
   org.docx4j.wml.R r = factory.createR();
   org.docx4j.wml.Drawing drawing = factory.createDrawing();
   // 设置布局参数...
   ```

### 完整示例（嵌套表格方案）

```java
private static void addImagesWithNestedTable(XWPFTableCell cell, List<String> imagePaths, 
                                           String basePath) throws Exception {
    cell.removeParagraph(0);
    
    // 创建嵌套表格（1行×3列）
    XWPFTable innerTable = cell.insertNewTbl(new XmlCursor());
    CTTblWidth innerTableWidth = innerTable.getCTTbl().addNewTblPr().addNewTblW();
    innerTableWidth.setW(BigInteger.valueOf(9000)); // 表格宽度
    
    XWPFTableRow innerRow = innerTable.createRow();
    
    // 每列添加一张图片
    for (int i = 0; i < 3; i++) {
        XWPFTableCell imgCell = innerRow.createCell();
        if (i < imagePaths.size()) {
            try {
                addSingleImage(imgCell, basePath + imagePaths.get(i));
            } catch (Exception e) {
                imgCell.setText("图片错误");
            }
        }
    }
}

private static void addSingleImage(XWPFTableCell cell, String imagePath) throws Exception {
    cell.removeParagraph(0);
    XWPFParagraph para = cell.addParagraph();
    para.setAlignment(ParagraphAlignment.CENTER);
    
    File imgFile = new File(imagePath);
    try (FileInputStream is = new FileInputStream(imgFile)) {
        XWPFRun run = para.createRun();
        run.addPicture(is, getImageType(imagePath), imgFile.getName(), 
                      Units.toEMU(100), Units.toEMU(100));
    }
}
```

通过这些修改，可以确保：
1. 每个单元格内的图片按每行3张排列
2. 图片间有适当间距
3. 布局稳定不会意外换行
4. 空图片情况有合理处理

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值