5

我在一个包装器 div 中有两个并排的 div。它们完美贴合并正确显示。但是，当我尝试在左侧 div 的左侧添加填充时，它不仅将该 div 的内容向右移动，而且实际上也将右侧 div 的内容移动了！如果我添加任何超过 20px 的填充，它实际上会将右手 div 移动到下一行！这怎么可能？在下面发布 CSS 和 HTML。包装器 div 是“hwrapper”。左边的 div 是“rbox”，右边的 div 是“card”。正如我所说，在“rbox”的左侧添加填充也会将“card”的内容向右移动。我怎样才能解决这个问题？

    #header {
    height:800px;
    width: 100%;
    margin-top: 0px;
    background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7;
    }
#hwrapper {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    text-align: center;
    }
#header .logo {
    padding: 3px;
    text-align: center; 
    }
#rbox {
    background:url(/assets/hredbox.png) 0 0 no-repeat;
    height: 420px;
    width: 274px;   
    float: left;
    text-align: left;
    padding-top: 10px; 
    }
#card {
    margin-left: auto;
    height: 420px;
    width: 720px;
    background:url(/assets/silverbackh360b0.png) 0 0 no-repeat;
    float: right; 
    text-align: left;
    padding-top: 20px;
    }

HTML：

    <div id="header">
    <div class="logo"><%= link_to image_tag("etlogo.png",alt:"Logo"), 'index.html' %></div>
    <div id="hwrapper">
        <div id="rbox"><span><center>Some Text</center></span><br><p><br>
            <dl>
            A list goes here.
            </dl><br><p><br>
                <span><center>Log In Here</center></span>
        </div>
        <div id="card">Lots more text in here.
        </div>
    </div>
</div>

任何帮助将不胜感激，因为我相信填充只会影响块内的元素，而边距会影响块之间的关系。

4

4 回答 4

3

我也遇到了这个问题。确保使用 box-sizing。尝试应用此代码：

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这允许您在 div 中使用填充，而不是扩展它的宽度。

于 2018-05-10T17:19:38.233 回答
1

我有一个类似的问题。我有以下 HTML：

<div style =
" padding-left  : 12px;
  position      : absolute;
  left          : 0px;
  width         : 120px;
  border        : solid 1px RED;

令我惊讶的是，当我将 padding-left 从 0px 更改为 12px 时，红色的右边框向右移动了 12px。很烦人。

我可以通过在样式中添加“box-sizing:border-box”来阻止这种情况的发生。烦人的移动右边框随着这个添加消失了：

<div style =
" padding-left  : 12px;
  box-sizing    :  border-box;

  position      : absolute;
  left          : 0px;
  width         : 120px;
  border        : solid 1px RED ;

所以“box-sizing:border-box”解决了这个问题。起初我发现原始行为如此违反直觉的原因是我使用的是 ABSOLUTE 定位，所以我假设“width:120px”会将右边框绝对定位在 120px。如果我说：“right:120px;”，我认为它会做类似的事情，但这意味着距离页面右边缘 120px。

总结 padding-left: 影响右边框的位置，如果

  1. 你使用'width:'（而不是'right:'）和
  2. 您没有指定“box-sizing:border-box”
于 2021-08-10T03:11:26.173 回答
0

确保 2 个 div 的宽度，包括填充（即，如果它的 25px 宽和 5px 的填充围绕其实际 35px 宽）不超过容器 div 的宽度。

于 2013-07-17T18:43:26.493 回答
0

只需使用此填充从 div 的宽度中减去填充（左右），一切都应该没问题。

于 2013-07-17T18:48:32.533 回答