0

该图像基本上显示了正在发生的事情。我有一个 1270px 的包装器。在该包装器内（由右侧的垂直线指示）我有 4 个 div 和一个表。表格内容正在推过页面包装器。页面包装器没有浮动，因为它只是将页面上的内容居中。

我尝试了以下方法，但没有任何效果：

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 宽度和表格大于 1270 像素的外部包装。

于 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 回答