Question

我希望自动增加div width。我试过这个，但它不起作用：有什么问题？

http://jsfiddle.net/silverlight/b6k8x/1/

HTML：

<div class="metro">
  <div class="rail">
    <div class="track">a</div>
    <div class="track">b</div>
    <div class="track">c</div>
  </div>
</div>

CSS：

.metro{
  position       :relative;
  background     :rgba(255, 255, 255, .03);
  width          :150px;
  height         :128px;
  padding-bottom :28px;
  overflow       :hidden;
  overflow-x     :scroll;
  }
.metro .rail{
    white-space:nowrap;
  position   :relative;
  width      :auto;
  background :rgba(255, 255, 205, .03);
  height     :128px;
  min-height :128px;
  overflow-y :hidden;
  }
.metro .rail .track{
  text-align:center;
  display    :inline-block;
  float        :left;
  margin-right :10px;
  width        :64px;
  height       :128px;
  background   :rgba(255, 105, 255, .3);
  }

Answer 1

您不应该限制地铁类的宽度：http://jsfiddle.net/b6k8x/2/

.metro{
position       :relative;
background     :rgba(255, 255, 255, .03);
height         :128px;
padding-bottom :28px;
overflow       :hidden;
overflow-x     :scroll;
}

Answer 2

Demo

删除

.metro{
    overflow-x: scroll;
}
.metro .rail .track{
    float: left;
}

Answer 3

地铁的宽度太小，只有150px

JSFIDDLE

Answer 4

易。删除.metro的高度和宽度

Answer 5

您可以使用自适应布局来实现您的目标。我刚刚用你的CSS修改了一下。你的问题不是很清楚，但我希望这就是你要找的东西。

我冒昧地假设您希望父元素（.metro）的固定宽度为150px。

.metro{
  background     :rgba(255, 255, 255, .03);
  width          :150px;
  height         :128px;
  padding-bottom :28px;
  overflow       :hidden;
  overflow-x     :scroll;
  }
.metro .rail{
  white-space:nowrap;
  width      :auto;
  background :rgba(255, 255, 205, .03);
  height     :128px;
  min-height :128px;
  overflow-y :hidden;
  width:100%;
  font-size: 0;
  }
.metro .rail .track:last-child{
    margin: 0;
}
.metro .rail .track{
  font-size:12px;
  text-align:center;
  display    :inline-block;
  float        :left;
  margin-right :3%;
  height       :128px;
  background   :red;
  width: 30%;
  }

通过浮动元素增加DIV宽度

5 个答案: