div内部宽度为100％且宽度为90％的div不起作用

Question

我为论坛主页制作了一个图片滑块，但内容正在从包装器中传出。

如何确保内容始终是包装器的100％宽度？

HTML：

<div id="wrapper">
  <table>
    <tbody>
      <tr>
        <td>
          <div class="rg-content">
            //image slider code
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS：

#wrapper {
  margin: 0 auto;
  max-width: 980px;
  width: 90%;
  background: linear-gradient(#fefefe, #e7e7e7);
}

.rg-content {
  width: 100%;
  background: #101010;
}

截图：

Answer 1

添加

<table style="width:100%;">

http://jsfiddle.net/jzLN6/

编辑：

根据你的jsfinddle和你的评论我做了一些修改以获得这个结果

http://jsfiddle.net/bB9tQ/4/embedded/result/

功能不全，但可能是你想要做的基本想法

因此，如果您希望布局流畅，则必须进行一些更改

删除ul的de px并将显示更改为inline-block，因为如果你有

display: block

这将使您的li元素在页面上失去正常流量，并且您无法使用％来扩展内容

 <ul style="width: 100%; display: inline-block; margin-left: ;">

之后你应该在每个li标签上使用％而不是px。

如果这是您需要的方法，请让我知道给您一个更好的详细示例

Answer 2

正在进行什么

您的#wrapper似乎没有将overflow设置为hidden。就个人而言，我倾向于远离tables并使用float'd block元素或inline-block元素。我最近使用figure构建了一个滑块用于外部包装，ul用于固定宽度内包装，li用于每个项目。我必须将figure设置为overflow:hidden才能隐藏所有不可见的内容。尝试添加它。

代码

#wrapper {
    overflow:hidden;
}