如何在div中对图像进行2列布局？
如何在div中对图像进行2列布局？
提问于 2014-03-26 12:37:33
我有一个缩略图列表，我想要适当地布局取决于缩略图的数量。所有缩略图都是这样编码的：
<a href="..."><img /></a>我想要一个2列设置与4个缩略图在每列-所有管理的css。
<div id="bx-pager">
<a href="..."><img /></a>
<a href="..."><img /></a>
<a href="..."><img /></a>
<a href="..."><img /></a>
<!-- here should column 2 -->
<a href="..."><img /></a>
<a href="..."><img /></a>
<a href="..."><img /></a>
</div>这可以使用一些css规则吗？
注：我使用一些XSLT来使用这个脚本生成Umbraco中的缩略图列表。这个脚本可以修改，但是xslt不是我的强项，所以希望得到一些关于css或XSLT的建议。
Gallery.xslt:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:variable name="mediaFolderId" select="number($currentPage/mediaFolderId)" />
<xsl:variable name="thumbWidth" select="number(58)" />
<xsl:variable name="thumbHeight" select="number(58)" />
<xsl:variable name="imageW" select="number(300)" />
<xsl:variable name="imageH" select="number(300)" />
<xsl:variable name="i" select="number(-1)" />
<xsl:template match="/">
<!-- Displays all images from a folder in the Media Library -->
<xsl:if test="number($mediaFolderId)">
<ul class="bxslider">
<xsl:for-each select="umbraco.library:GetMedia($mediaFolderId, true())/Image">
<xsl:if test="umbracoFile !=''">
<li><a href="{umbracoFile}" title="{@nodeName}" class="gal"><img src="/imageGen.ashx?image={umbraco.library:UrlEncode(umbracoFile)}&width={$imageW}&height={$imageH}" width="{$imageW}" height="{$imageH}" alt="{@nodeName}" title="{@nodeName}" /></a></li>
</xsl:if>
</xsl:for-each>
</ul>
<div id="bx-pager">
<xsl:for-each select="umbraco.library:GetMedia($mediaFolderId, true())/Image">
<xsl:if test="umbracoFile !=''">
<xsl:call-template name="section" />
</xsl:if>
</xsl:for-each>
</div>
</xsl:if>
</xsl:template>
<xsl:template name="section">
<a href="javascript:void(0);" data-slide-index="{0 + count(preceding-sibling::Image)}"><img src="/imageGen.ashx?image={umbraco.library:UrlEncode(umbracoFile)}&width={$thumbWidth}&height={$thumbHeight}&=t" width="{$thumbWidth}" height="{$thumbHeight}" alt="{@nodeName}" title="{@nodeName}" /></a>
</xsl:template>
</xsl:stylesheet>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-03-26 13:05:21
如果列不支持您的需要，您只需使用float和display：
演示
对于单个图像：
img:nth-child(odd) {/* you can include a loop in your xlst to apply a class instead */
float:left;
clear:left;
margin-bottom:0.2em;
}
img {
display:block;
margin:0 0.2em 0.2em 0;
}对于链接，基本相同，需要调整它们的大小()或将它们显示为display:table;而不是block;。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22661296
复制相关文章
相似问题
腾讯云开发者
