Question

我在使用图片库按照我想要的方式行事时遇到了一些麻烦。照片堆叠在一起，而不是并排坐着。我试图使用float属性，但我认为我做错了。非常感谢任何帮助，谢谢！

HTML：

<img src="art/abstract.jpg"><div class"gallery">Abstract Painting</div> <img src="art/graphite.jpg"><div class"gallery">Graphite Drawing</div>...

.gallery img {
    display:inline-block;
    width:350px;
    height:350px;
    margin:2px;
    float:left;
    padding-bottom:10px;
    padding-left:5px;
}

.gallery {
    float:left;
    text-align:center;
}

CSS：

protected void Page_Load(object sender, EventArgs e)
{
  if(Page.IsPostBack)
  {
    LinkButton lbtn = sender as LinkButton;
    searchCatAndUpdateview(lbtn.CommandArgument);
  }
}

protected void searchCatAndUpdateview(string catID)
{
  Catalog rootCat = (Catalog)ViewState["catalogueEntries"];
  List<object> catalogueEntries = new List<object>();
  Catalog catFound = searchCatalogByID(rootCat, catID);
  lstView_entries.DataSource = catalogueEntries;
  lstView_entries.DataBind();
}

Answer 1

只需使用额外的div（使用下面的类.wrapper）将图像用它的描述包装然后浮动它：

<div class="gallery">
    <div class="wrapper"><img src="art/abstract.jpg"/><div class"gallery">Abstract Painting</div></div>
    <div class="wrapper"><img src="art/graphite.jpg"/><div class"gallery">Graphite Drawing</div></div>
</div>

.wrapper {
    float: left;
}

jsfiddle

另外我认为你可以删除这些样式：

.gallery img {
    display:inline-block;
    float:left;
}

Answer 2

<div class"gallery">

你错过了＆＃39; =＆＃39;

将其更正为：

<div class="gallery">

图库/浮动问题

2 个答案: