DIV 应该在溢出中并排保持:隐藏的父级 [英] DIVs should remain side by side within overflow:hidden parent

问题描述

我正在尝试将多个 div 并排放置在溢出:隐藏"父级中.每个子 div 必须使用父组件的 100% 宽度.这是为了模拟每个子div之间的滑动".

一个 jsfiddle 来说明我的问题:https://jsfiddle.net/f83qeoxc/3/

<div id="i1" class="item">第 1 项
<div id="i2" class="item">第 2 项

<div id="i3" class="item">第 3 项

.包装{宽度:200px；显示:块；边框:1px纯黑色；溢出-x:隐藏；}.物品{显示:线块；向左飘浮;宽度:100%；边框:1px纯红色；box-sizing: 边框框；}

StackOverflow 已经有大量关于此类问题的材料.但是，我找不到涵盖以下细节的解决方案:

• 子级可能没有绝对定位，因为父级必须根据其内容高度调整大小.

• 因为每个孩子都有 100% 的宽度，所以一次只需要出现一个，其他的被父级的 overflow-x 属性隐藏

感谢您提供解决此问题的建议！

解决方案

更改 css

 .wrapper {边框:1px纯黑色；显示:块；溢出-x:滚动；空白:nowrap；宽度:200px；}.物品 {边框:1px纯红色；box-sizing: 边框框；显示:内联块；*显示:内联；/* IE7*/*zoom:1;/* IE7*/宽度:100%；}

https://jsfiddle.net/f83qeoxc/10/

I'm trying to make multiple divs sit side-by-side in an "overflow: hidden" parent. Each child div must use 100% width of the parent component. This is to simulate "swiping" between each child div.

A jsfiddle to illustrate my issue: https://jsfiddle.net/f83qeoxc/3/

<div class="wrapper">
    <div id="i1" class="item">
      item 1
    </div>
    <div id="i2" class="item">
      item 2
    </div>
    <div id="i3" class="item">
      item 3
    </div>
</div>

.wrapper{
  width: 200px;
  display: block;
  border: 1px solid black;
  overflow-x: hidden;
}

.item{

  display: ineline-block;
  float: left;
  width: 100%;
  border: 1px solid red;
  box-sizing: border-box;
}

StackOverflow already has plenty of material about this sort of issue. However, I couldn't find a solution that covers the following specifics:

• children may not have absolute positioning as the parent must resize based their content height.

• as each child has 100% width, only one has to appear at time, others are hidden by the parent' overflow-x property

Thanks for suggestions to solve this!

解决方案

Change css

 .wrapper {
    border: 1px solid black;
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    width: 200px;

}

  .item {
    border: 1px solid red;
    box-sizing: border-box;
    display: inline-block;
    *display:inline; /* for IE7*/
    *zoom:1;/* for IE7*/
    width: 100%;
}

https://jsfiddle.net/f83qeoxc/10/

这篇关于DIV 应该在溢出中并排保持:隐藏的父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！