0

画像は基本的に何が起こっているかを示しています。私は1270pxのラッパーを持っています。そのラッパー (右側の垂直線で示されます) 内には、4 つの div と 1 つのテーブルがあります。テーブルの内容がページ ラッパーを超えています。ページ ラッパーは、コンテンツをページの中央に配置するためだけのものであるため、フロートはありません。

次のことを試しましたが、何も機能しません。

border: none;
padding: 0px;
border-collapse: collapse;
overflow: hidden;
table-layout: fixed;

これは何が原因ですか？これにより、他の 4 つの div の他のすべてのコンテンツもページ ラッパーを通過できるようになります。

ここに画像の説明を入力

編集：

<div id="wrap-page">
  <div id="wrap-content">
        <table id="content">
          <tbody>
            <tr>
              <td id="featured">
                <h1>h1</h1>
                <p>Lorem ipsum</p>

                <h2>h2</h2>
                <p>Lorem ipsum</p>
              </td>
              <td class="sidebar">
                <p>Lorem ipsum</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

html, body{
  width:100%;
  margin:0;
  padding:0;
  background:#ccc;
  font-size:100%;
  line-height:1;
  font-family:Arial;
}

#wrap-page{
  float:left;
  margin:auto;
  width:1270px;
}

#wrap-content{
  margin:0 5px;
  border:1px solid;
}

#content{
  position:relative;
  float:left;
  border-collapse:collapse;
  width:1270px;
  margin:7px 0;
}

#featured{
  width:822px;
}

.sidebar{
  width:193px;
  vertical-align:top;
}
4

2 に答える 2

0

内側の div の幅とテーブルが、1270px の外側のラッパーよりも大きくなっています。

于 2012-12-27T15:58:29.180 に答える
0

テキストに境界線を追加しようとしているようです...

この代替手段を試してください (テーブルなし): http://jsfiddle.net/UXKTA/9/

.test
{
    padding: 5px;
    border: 1px solid black;
    width: 200px;
}​
于 2012-12-27T16:06:20.740 に答える