Question

我希望在具有图像包装类的div中具有类image-1内联的div。但我已经尝试了很多但是类图像-1的div没有内联。我可以知道我在哪里做错了吗？

<style>
*{
    margin:0;
    padding:0;
 }
.wrapper{
    width:100%;
    height:400px;
    background-color:#666;
    padding:5px;
    box-sizing:border-box;
    overflow-x:hidden;
 }
.image-wrapper{
    width:300%;
    height:390px;
    background-color:#000;
 }
.image-1{
    width:100%;
    height:100%;
    background-color:#03F;
    float:left;
    display:inline-block;
 }
 </style>
</head>
<body>
<div class="wrapper">
    <div class="image-wrapper">
        <div class="image-1">
        </div>
        <div class="image-1">
        </div>
        <div class="image-1">
        </div>
    </div>
</div>
</body>

Answer 1

class="image-1"的广告的宽度设置为其父元素（class="image-wrapper"）的100％。

如果要浮动三个图像/ div，请将它们设置为width: 33.3%（父宽度）。

示例，带数字：

.wrapper has width 300px
.image-wrapper has width 900px (300% of 300px)
.image-1 has width 900px (100% of 900px above)

链接到小提琴：http://jsfiddle.net/8bg8mw53/

我将包装宽度设置为20％（因为我想告诉你它是如何工作的，你可以返回100％那里）和评论溢出，出于同样的原因。您可以退回此房产。

Answer 2

1）从图像-1元素中删除float:left

2）在图像包装器上设置white-space:nowrap;

<强> FIDDLE

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.wrapper {
  height: 400px;
  background-color: #666;
  padding: 5px;
  box-sizing: border-box;
}
.image-wrapper {
  height: 390px;
  background-color: #000;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}
.image-1 {
  width: 100%;
  height: 100%;
  background-color: #03F;
  display: inline-block;
}
.image-1 + .image-1 {
  background-color: wheat;
}
.image-1 + .image-1 + .image-1 {
  background-color: tomato;
}

＆＃13;

<div class="wrapper">
  <div class="image-wrapper">
    <div class="image-1">
    </div>
    <div class="image-1">
    </div>
    <div class="image-1">
    </div>
  </div>
</div>

＆＃13;

Answer 3

您应该将width的{{1}}设置为.image-1。宽度计算与父项相关，在本例中为33.3%。

请参阅此JSFiddle

Answer 4

子div的总宽度超过父div的宽度。

*{
    margin:0;
    padding:0;
 }
.wrapper{  
 }
.image-wrapper{
  width: 300px;
  background: #fff;
  white-space: nowrap;
 }
.image-1{
  height: 100px;
  width: 100px;
  background: #eaeaea;
  display: inline-block;
  position:relative;
  border-radius:5px;
 }

拨弄here

为什么图像不是一个接一个地出现？

4 个答案: