Html 我试图以3x3格式定位9幅图像，使其线条完美

我试图在我的网站上创建一个3x3的网格，有9个图片，下面有文字。前6张图片看起来像我想要的，但当我添加最后3张图片时，第一张图片跳到第二行的第3张图片下面，最后2张图片向下

这是一把小提琴：

html:

Bacau du rouet

---

如果在design cast id中添加空白：nowrap，则应正确显示。尽管您需要重新调整图像下的文本：

#design-cast {
position: relative;
overflow: hidden;
white-space: nowrap; //Add this
}

查看更新的JSFIDLE

---

我希望这会有所帮助。

我认为这是因为文本的长度，如果内容相同，您不会有问题，我建议将所有文本都包含在一个层中，宽度和高度相同，以便使所有框的宽度和高度相同。。并将内容调整到该层，或制作一些脚本，以在悬停或某些内容上显示内容

我将使用

display:flex

实现以下目的：

/*
*/
.白色背景{
背景色：#FCFBE3；
}
.网站内容{
背景色：#FCFBE3；
}
h1{
颜色：黑色！重要；
}
.虚线边框{
边界顶部：无；
}
分部项目{
垂直对齐：顶部；
显示：内联块；
文本对齐：居中；
宽度：290px；
左边缘：13%；
}
.ext1{
左边距：25%！重要；
}
img{
}
.标题{
显示：内联块；
}
斯托比尔德先生{
显示：块；
保证金：自动；
}
#搜索按钮{
显示：无；
}
#固定行1{
左边距：125px；
}
#设计铸件{
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
}
.成员{
宽度：32%；
利润率：0.45px 0；
}
.姓名{
底部：0px；
文本对齐：居中；
字号：16pt；
字体系列：“蒙特塞拉特”，无衬线！重要；
字体大小：粗体；
利润上限：-15px；
}
.成员img{
宽度：100%；
显示：块；
}
.描述{
字号：10pt；
字体系列：“蒙特塞拉特”，无衬线；
}
伯达德先生{
边框：2个实心#e5！重要；
}
.fixsamesize{
宽度：333px；
高度：210px；
-webkit过滤器：亮度（100%）；
}
.fixsamesize：悬停{
-webkit过滤器：亮度（70%）；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
}
维莫尔·霍斯先生{
文本对齐：居中；
}

博伊松圣特罗佩斯酒店
Klicka för att se mer
凝胶化
2006
布莱克特男孩x萨鲁特
业主：Yvonne Talamo&Björn Häggström
级别：145
一匹为我们赚了这么多钱并将永远留在家里的马。

巴考杜鲁埃酒店
Klicka för att se mer
母马
2012
巴尔的摩卡拉汉酒店
业主：Vivi Anne Ohlsson&Katarina Pettersson
级别：125
真是一匹快跑的马，将来肯定会上大课。

阿尔德纳利克斯
Klicka för att se mer
母马
2008
感觉卡地亚x
业主：勒内·弗洛克和卡塔琳娜·佩特森
级别：135
一种既快又仔细的透明圆机器。对于喜欢缎带的人来说，这是一匹完美的马！

卡桑德拉S
Klicka för att se mer
母马
2006
宇宙人S-卡雷蒂诺
业主：卡塔琳娜·佩特松
级别：135
超级漂亮的马，还有很多东西要送！她完全有可能成为一名三年级或三年级的尖子马。

小鸡电影
Klicka för att se mer
母马
2008
嘻哈x齐柏林飞艇
业主：卡塔琳娜·佩特松
级别：150
一匹有着奇异思维的马。她总是想出人头地，有潜力一路登上顶峰。

把我涂成灰色
Klicka för att se mer
母马
2011
西塞罗Z x格拉夫格拉纳斯
业主：卡塔琳娜·佩特松
级别：
这匹绝妙的马是顶级运动。真的很小心，很快。

卡桑德拉S
Klicka för att se mer
母马
2006
宇宙人S-卡雷蒂诺
业主：卡塔琳娜·佩特松
级别：135
超级漂亮的马，还有很多东西要送！她完全有可能成为一名三年级或三年级的尖子马。

小鸡电影
Klicka för att se mer
母马
2008
嘻哈x齐柏林飞艇
业主：卡塔琳娜·佩特松
级别：150
一匹有着奇异思维的马。她总是想出人头地，有潜力一路登上顶峰。

把我涂成灰色
Klicka för att se mer
母马
2011
西塞罗Z x格拉夫格拉纳斯
业主：卡塔琳娜·佩特松
级别：
这匹绝妙的马是顶级运动。真的很小心，很快。

您的小提琴已经是3*3格式了。以全宽拖动小提琴的结果部分这使所有9个图像显示在一条直线上。您使用的是哪种浏览器？你查过我的密码了吗？如果只使用

display:flex

，则所有内容都在一行中。但是我的代码有更多的代码。尝试了一下，在调整文本后，我得到了相同的结果。这很有效！谢谢，我刚刚将文本包装在一个div中，并为它们设置了宽度和高度，现在它们的线条完美了。

#design-cast {
position: relative;
overflow: hidden;
white-space: nowrap; //Add this
}