Css 如何：根据库内容动态划分宽度

我正在尝试创建一个水平滚动库（带有编辑过的wordpress主题） 目前，我有nextGen Gallery插件来管理我的所有图像

现在，我唯一能让这些图像相邻显示并水平滚动的方法是将画廊的宽度设置为巨大的10000像素

/* ----------- Gallery style -------------*/

.ngg-galleryoverview {
overflow: hidden;
margin-top: 10px;
width:10000px;
overflow: hidden;
clear:both; 
display:inline-block !important;
}

/* ----------- Gallery style -------------*/

有没有一种方法可以根据图像的数量动态改变宽度

下面是stylesheet.css代码

/* Blocks       */
#container { width:1000px; margin:25px 60px; }
#left-box { float:left; width:270px; margin-right:65px; }
#sidebar { float:right; text-align:right; }
#sidebar ul { text-align:right; list-style:none; }
#sidebar h3 { font-size:1em; }
#sidebar small { font-size:0.7em; font-family:Arial, Helvetica, sans-serif; }
#author_note { font-size:0.85em; width:220px; padding:5px; border:1px solid #CDCDCD; float:right; text-align:right; }
#notes { width:600px; float:left; margin-top:20px; overflow-x:auto; overflow-y:hidden;     height:500px; display:inline-block;}
#notes h1 { font-size:1.6em; font-weight:normal; margin:0; padding:0; }
#logo { float:right; margin-top:30px; }
#navigation { clear:right;float:right; width:270px; text-align:right; }
.copyright { margin-top:40px; color:#999999; } 
.copyright a { color:#666666; text-decoration:underline; }
.copyright .theme { font-size:0.7em; font-family:Arial, Helvetica, sans-serif; }    
.copyright .theme a { color:#999; text-decoration:none; }
.pages { margin-top:80px; font-size:1.1em; font-weight:200; }
.pages li { margin-top:5px; font-size:0.9em; }
.categories { margin-top:45px; font-size:0.85em; }
.links { margin-top:45px; font-size:0.85em; }
.navigation { margin-bottom:50px; font-size:0.85em; }

如果可能的话，我宁愿避免使用javascript，因为我知道在实现它时会遇到巨大的问题。但任何帮助都将不胜感激。

---

谢谢

我不认为你想用纯CSS做什么。我创建了一个自定义jQuery插件，它应该可以与您的代码一起使用

演示：

我这样做是因为它根据具有最大高度的图像和所有图像的宽度加上右边距的总和动态设置尺寸（因此可以在它们之间添加一些空间）

jQuery插件代码

---

编辑：：修复

#scrollGal {
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid black;
    padding: 15px;
}

#scrollGal img {
    float: left;
    margin: 0px;
    padding: 0px;
}

#scrollGal div {
    margin: 0px;
    padding: 0px;
}

#notes {
    overflow-x: visible;
    overflow-y: visible;
}

编辑：从HTML中删除“scrollGal”div。用以下代码替换JS（新代码将用scrollGal div包装相应的div）

（函数（$）{
$.fn.scrollGal=函数（）{
返回此值。每个（函数（）{
$（此）.wrap（“”）；
$sg=$（this.parent（）；
var obj=$（this.find（'img'）；
var arr=$.makeArray（obj）；
var w=0，ww=0，h=0；
$。每个（arr，函数（i，val）{
w+=$（this）.width（）；
w+=（parseInt（$（this.css（'marginRight'））；
//找到最大宽度
var nw=$（this）.width（）；
如果（nw>ww）ww=nw；
//找到最高点
var nh=$（this）.height（）；
如果（nh>h）h=nh；
});
$sg.宽度（ww）；
$sg.高度（h）；
$sg.儿童（'div'）。宽度（w）；
});
};
})（jQuery）；
$（'ngg-gallery-1-8'）.scrollGal（）；

如果你不需要支持IE7，那么你可以申请

.theContent {
  display: table;
}

.ngg-galleryoverview {
  display: table-row;
  float: none;
}

ngg-gallery-thumbnail-box {
  display: table-cell;
  float: none;
}

---

然后它会出现在你想要的地方。仍然会有一些问题，但我相信你可以从那里解决。

Bah！我们希望避免这种情况。我是一个编码高手，不知道应该编辑哪些js和css文件。我假设JS应该与gallery插件相关，CSS应该与条目相关的php文件相关，我已经将html放入php文件中，但到目前为止。。。不工作。我有一种感觉，所以我试着保持它相当基本。您可以将CSS添加到style.CSS文件的末尾。您可以创建一个名为scrollGal.js的新文件，并将其放在wp includes/js目录中，然后将我链接的演示中的js放在那里（确保在页面加载jquery.js之后加载scrollGal.js——请查看标记上方）。至于html，你必须将其放在模板页面上，并在其中加载库代码。hrm..这不太管用。即使它似乎加载了所有正确的文件。。。谢谢你的耐心！在将ScrollGall div放在ngg gallery div之前有困难，因为ngg gallery是一个被调用的插件，输出时看起来像这样-尝试替换js插件中的函数，但不起作用。.ngg galleryoverview标记位于插件（不是stylesheet.css）的一部分样式表中-可能与gallery插件的单独样式表有关？好的，请参阅最新编辑。基本上，您可以从HTML中取出scrollGal div，jQuery将自动添加它（因此使用新代码更新js文件）。

.theContent {
  display: table;
}

.ngg-galleryoverview {
  display: table-row;
  float: none;
}

ngg-gallery-thumbnail-box {
  display: table-cell;
  float: none;
}