2

我正在开发一些同时使用 div 和表来呈现数据块的代码。表格元素按预期呈现，但 div 超出了页面的宽度。下面的示例代码是我的项目中产生问题的代码的最小选择。如您所见，两个元素都使用同一个类“contentblock”来指定 100% 宽度。Chromium 版本 25.0.1364.160 Ubuntu 12.04 (25.0.1364.160-0ubuntu0.12.04.1)。

<html><body>
<style>
    .contentblock {
        width: 100%;
        border: 1px solid #000;
        padding: .5em;
    }
    p {
        margin-bottom: 1em;
    }
</style>

<div class="contentblock">
    <p><span class="label">LOREM IPSUM SIC DOLOR</span></p>

    <p>Praesent aliquam varius dolor. Vestibulum at sem sed augue interdum condimentum eget ornare urna. Nullam blandit auctor bibendum. Cras hendrerit iaculis venenatis. Curabitur interdum, lorem quis feugiat interdum, urna sapien ultricies nisl, in pretium diam arcu ac eros. Fusce elit tellus, euismod at aliquet non, pulvinar at sapien. Aliquam molestie ante in augue convallis a malesuada nulla posuere. Aliquam blandit massa a eros viverra semper. </p>
</div>
<table class="contentblock">
    <tr>
        <th class="label"><span class="label">Lorem</span></th>
        <th class="checkbox"><span class="label">Ipsum</span></th>
        <th class="checkbox"><span class="label">Dolor</span></th>
        <th class="checkbox"><span class="label">Aliquam</span></th>
        <th class="initialbox"><span class="label">Dictum</span></th>
    </tr>
</table>
</body></html>
4

4 回答 4

8

边框导致您的 div 更宽，使用 box-model：http ://css-tricks.com/the-css-box-model/

.contentblock {
      width: 100%;
      border: 1px solid #000;
      padding: .5em;
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
      box-sizing: border-box;
}

但实际上你可能应该有某种 CSS 重置样式表，例如 normalize： http: //necolas.github.io/normalize.css/

和/或应用全局盒子模型：

*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
于 2013-11-13T16:10:23.330 回答
0

这是一个 jsfiddle，可帮助您查看可以更改的内容：jsfiddle

首先我改变的是margin: 0;在你的身体上添加一个：

body { margin:0; }

然后我添加box-sizing以帮助解决width: 100%和padding:.5em问题

.contentblock {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
于 2013-11-13T16:19:38.170 回答
0

body首先将和的边距重置html为0：

body, html {
    margin:0;
}

然后使用box-sizing这样您的边框不会增加元素的宽度：

.contentblock {
    width: 100%;
    border: 1px solid #000;
    padding: .5em;
    // Add the next 3 lines
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
于 2013-11-13T16:11:56.417 回答
0

在默认的 CSS 盒子模型中，即元素box-sizing: content-box的padding和border被添加到指定的width，所以你的.contentblockdiv 实际上是 100% 的窗口加上 1em 填充和 2px 边框（左右） - 所以它比 1em+2px 宽视口。

您可以通过切换到border-box盒子模型（将box-sizing: border-boxCSS 属性添加到元素）轻松解决此问题。在border-box模型中，填充和边框从显式宽度中减去而不是添加到其中。

如果您希望所有内容都使用减法border-boxCSS 框模型而不是加法content-box默认值，只需将其添加到您的 CSS 中：

* { box-sizing: border-box }

老实说，这是一种更直观的布局方法，可以帮助避免很多尺寸和定位问题。在过去的两三年里，我在我建立的每个网站上都使用了这个。

Paul Irish 有一篇很棒的博客文章对此进行了更多讨论。

于 2013-11-13T16:14:19.343 回答