Question

我有这个CSS代码：

#portrait{
  height: 300px;
  width: 550px;
  border: solid;
  margin-right: auto;
  margin-left: auto;
  word-wrap:break-word;
  overflow:hidden;
}
.image{
  float:left;
  height: 30%;
  border:solid 1px;
  padding: 1px;
  posit ion:relative;
}

和html：

<div id="portrait">
<img class="image" src="http://media.indiatimes.in/media/photogallery/2012/Dec/best_images_of_2012_1355117665_1355117684.jpg"/>
<!--Can't pull all images in here because it thinks my question is spam-->
<img class="image" src="http://adrao.com.sapo.pt/soajo_sol.jpg"/>
<img class="image" src="http://www.befrielsen1945.dk/temaer/internationalt/krigensgang/kilder/ofre.jpg"/>
<img class="image" src="http://ionenewsone.files.wordpress.com/2009/08/oj-simpson-smiling-murder-trial.jpg"/>
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/> 
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/>
</div>

我想要做的是让隐藏在x轴上的图像溢出（而不是第一行中的第一个金发女人，我希望她在必要时被裁剪但仍留在第一行等等）。当我做溢出-x隐藏它将无法正常工作。对此有何看法？

Answer 1

因为#portrait不允许溢出图像 你需要一个具有指定宽度的额外容器，以容纳这些图像。这样做：

<div id="portrait">
    <div id="wrapper">
        your images
...

然后申请

#wrapper{
    height:30%;
    overflow:hidden;
    width: 1000px; /* it is only important to be bigger then parent for one image width size */
}

.image{
  height: 100%;

Answer 2

当我使用溢出隐藏时，我的视频消失了。原来我需要设置容器的宽度而不仅仅是高度。而且我没有必要在容器上使用任何定位。

Answer 3

应用溢出：隐藏；属性给容器而不是图像。它会解决你的问题！！

溢出：隐藏不适用于图像

3 个答案: