Question

我现在很难使用HTML / CSS。我喜欢创建某种滑块，其中的图像与hidden overflow并排放置（所以当你按下＆＃34;下一个＆＃34;箭头它会＆＃34;移动＆＃34;图片向左（隐藏左边的一个并显示隐藏的那个）。

问题是我不能让我的div超越其父母，因此我无法将我的图像并排排列。

看起来像这样：

＆＃13;

<div id="slider">
  <div id="images">
    <div class="image_container">
      <img src="" alt="1"/>
    </div>
    <div class="image_container">
      <img src="" alt="2"/>
    </div>
    ...
    <div class="image_container">
      <img src="" alt="3"/>
    </div>
  </div>
</div>

＆＃13;

#slider应位于95%的{{1}}，最好是基于内容的高度， width应该有＆＃34;没有宽度＆＃34; - 它应该基于内容而#images〜，max-height应该有img的.image_container - 这些应该排在一起。

任何想法我怎样才能做到这一点？我一直在尝试很多东西，但都没有。

Answer 1

将子元素的display属性设置为inline-block，将父级的white-space属性设置为nowrap。

＆＃13;

#parent{
  background:#000;
  height:100px;
  padding:5px;
  white-space:nowrap;
  width:200px;
}
#parent>div{
  display:inline-block;
  height:100%;
  width:100%;
}
#parent>div:nth-child(odd){background:#f00;}
#parent>div:nth-child(even){background:#0f0;}

＆＃13;

<div id="parent"><div></div><div></div><div></div><div></div><div></div></div>

＆＃13;

HTML使子div扩展超出父div（没有宽度：9999px）

1 个答案: