内联 CSS 以创建一行水平图像答案

【问题标题】：Inline CSS to create a row of horizontal images内联 CSS 以创建一行水平图像
【发布时间】：2014-06-20 19:25:22
【问题描述】：

我在一所使用 drupal 6 的大学工作，但我对 Drupal 的灵活性很小。我需要使用内嵌 css 来创建一行 4 个水平图像。

【问题讨论】：

坦率地说，在 Drupal 中，有时只使用一个 frakkin 表会更容易。

【解决方案1】：

CSS：

div {display: block;}
img {display: inline;}

HTML：

<div>
<img src="imgURL" />
<img src="imgURL" />
<img src="imgURL" />
<img src="imgURL" />
</div>

【讨论】：

所以我可以将其复制并粘贴到drupal内置的所见即所得编辑器中？我应该把 CSS 部分放在哪里，就像我把它放进盒子里一样，它只是显示为文本

【解决方案2】：

如果我必须使用内联 CSS，我会使用表格。该表的基本代码如下所示。您可以将宽度设置为 % 或固定像素。

<table style="border-collapse:collapse;width:100%;">
<tr>
    <td width="25%">image 1</td>
    <td width="25%">image 2</td>
    <td width="25%">image 3</td>
    <td width="25%">image 4</td>
</tr>
</table>

如果您想要间距，您可以添加单元格填充和方向。下面的代码将使左侧单元格填充 10px。

<td width="25%" style='padding:0px 0px 0px 10px'>

你可以在jsfiddle看到这些例子

【讨论】：

【解决方案3】：

如果你有更多的图片（画廊等），你可以像这样使用浮动布局：

HTML：

<div id="gallery">
    <img src="imgURL" />
    <img src="imgURL" />
    <img src="imgURL" />
    <img src="imgURL" />
    <img src="imgURL" />
    <img src="imgURL" />
    <img src="imgURL" />
    <img src="imgURL" />
</div>

CSS：

#gallery { background: #fee; }
#gallery::after { clear: left; display: block; content: ""; }
#gallery img { display: block; width: 150px; margin: 20px; }

布局灵活，每行的图片数量取决于实际的#gallery div 宽度。

【讨论】：

【解决方案4】：

有两种方法可以添加你的 CSS。在您的主题文件夹中添加 css sites/all/themes 或者您可以在编辑器中添加内联 css。要将其添加为内联 css，您只需在保存节点时，选择输入格式为 PHP 代码，这样您就可以添加内联 css .

您可以将内联 CSS 添加为 drupal_set_html_head('<style> #gallery { background: #fee; } #gallery::after { clear: left; display: block; content: ""; } #gallery img { display: block; width: 150px; margin: 20px; } </style> ');

或者您可以调用添加到模块中的 css 文件。

drupal_add_css( $your_module_path . 'your_css_file.css');

【讨论】：