Question

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

Answer 1

CSS：

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

HTML：

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

Answer 2

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

<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

中查看这些示例

Answer 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宽度。

Answer 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');

内联CSS创建一行水平图像

4 个答案: