织梦图文资讯宽度如何适配多终端显示？

这是一个非常常见的需求，因为默认的模板样式往往不符合网站的整体设计,调整宽度主要涉及两个方面：

1. 后台设置：控制每行显示的文章数量。
2. 前台修改：通过修改CSS和HTML模板文件，精确控制每个图文模块的宽度、间距等。

第一步：后台设置 - 控制每行显示数量

这是最直接的方法,决定了列表页一共有几列。

1. 登录织梦后台。
2. 进入 【栏目管理】 -> 【添加栏目】 或 【编辑栏目】。
3. 找到你想要修改的“图文资讯”栏目。
4. 在栏目编辑页面，找到 【列表选项】 标签页。
5. 在 【列表模板(list_xxx.htm)】 中，你会看到一个选项叫 【每行显示条数】。
   • 默认值通常是 1,也就是一篇文章占满一行。
   • 如果你希望一行显示2篇文章，就把它改成 2。
   • 显示3篇就改成 3,以此类推。

注意：

• 这个设置会影响调用该栏目列表的 所有 模板，包括首页、列表页等。
• 它只控制 loop 循环的次数，并不会自动调整每个条目的宽度，你必须配合前台CSS的修改才能让它们并排显示。

第二步：前台修改 - 精确控制样式（核心步骤）

后台设置了每行显示数量后，我们需要修改前台文件，让文章列表能够正确地并排显示,并设置你想要的最终宽度。

这里以 首页调用 和 列表页 为例,步骤基本一致。

修改首页的“图文资讯”模块

假设你希望首页的“图文资讯”一行显示 2个，每个模块宽度为 500px。

找到并修改模板文件

• 登录织梦后台，进入 【模板】 -> 【默认模板管理】。
• 找到首页模板文件，通常是 index.htm。
• 在 index.htm 中，找到调用“图文资讯”栏目的代码，它通常是这样的：

  {dede:arclist typeid='栏目ID' row='8' titlelen='30'}
  <li>
      <a href="[field:arcurl/]" title="[field:title/]">
          <img src="[field:picname/]" alt="[field:title/]">
          <span class="title">[field:title/]</span>
      </a>
  </li>
  {/dede:arclist}

  • typeid='栏目ID'：替换成你的图文资讯栏目ID。
  • row='8'：表示总共调用8篇文章，根据你的“每行显示条数”来计算，比如一行2个，这里就设为8,这样会显示4行。

修改CSS样式文件

• 找到CSS文件，通常是 /templets/你的模板风格/style.css。
• 在CSS文件中，为上面的 arclist 添加样式。

示例：一行显示2个，每个宽度500px

我们需要设置一个容器来包裹这些 li，然后设置每个 li 的样式。

修改 index.htm (给列表加一个容器)

<!-- 在arclist外面加一个div，并给它一个class，"article-list" -->
<div class="article-list">
    {dede:arclist typeid='栏目ID' row='8' titlelen='30'}
    <li>
        <a href="[field:arcurl/]" title="[field:title/]">
            <img src="[field:picname/]" alt="[field:title/]">
            <span class="title">[field:title/]</span>
        </a>
    </li>
    {/dede:arclist}
</div>

修改 style.css (添加CSS样式)

/* 1. 清除列表的默认样式，去掉项目符号和内外边距 */
.article-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* 使用Flex布局，让li元素横向排列并换行 */
    display: flex;
    flex-wrap: wrap;
}
/* 2. 设置每个图文模块的样式 */
.article-list li {
    /* 
     * 宽度设置：
     * 一行显示2个，每个宽度设为 500px。
     * 你可以根据需要调整这个值。
     */
    width: 500px; 
    /* 
     * 外边距：
     * li元素之间的间距，左右边距为10px，上下边距为10px。
     * 这样两个li之间就会有20px的间距（10px+10px）。
     */
    margin: 10px; 
    /* 防止图片撑破容器 */
    box-sizing: border-box;
    /* 可选：给每个模块加个边框和背景色，方便查看效果 */
    border: 1px solid #eee;
    background-color: #f9f9f9;
}
/* 3. 设置图片样式，使其适应容器宽度 */
.article-list li img {
    width: 100%; /* 图片宽度100%填充li容器 */
    height: auto; /* 高度自动，保持图片比例 */
    display: block; /* 去除图片底部的间隙 */
}
/* 4. 设置标题样式 */
.article-list li .title {
    display: block;
    text-align: center;
    padding: 5px 0;
    font-size: 14px;
    color: #333;
}

如何调整？

• 想一行显示3个？ 把 width 改成 330px (，margin 保持不变。
• 想让间距更大？ 把 margin: 10px; 改成 margin: 20px;。
• 想去掉间距？ 把 margin 改成 0，并给 .article-list 加上 gap: 20px; (这是更现代的Flex间距写法)。

修改列表页的宽度

列表页的模板文件通常是 list_article.htm (根据你的栏目命名可能不同)。

修改方法和首页完全一样：

1. 找到模板文件：/templets/你的模板风格/list_article.htm。
2. 找到循环代码：通常也是 {dede:arclist} 或 {dede:list}
3. 添加容器：给循环代码外面包裹一个 div，<div class="list-container">。
4. 修改CSS：在 style.css 中为 .list-container li 设置你想要的 width 和 margin。