css - 填充此 div 的最佳方法是什么？

Question

我正在尝试将我的网站从表格布局转换为 div 布局，虽然使用表格布局一切都更加直观，但我每时每刻都被这个 div 布局卡住了，这是我当前的问题 -

我希望左侧 div 中的文本从左侧和顶部填充。如果我填充左侧 DIV 本身，整个 div 都会展开(即使容器 div 为其定义了 700px 宽度)；如果我尝试为文本本身留边距，出于某种原因，它仅适用于创建左边距，但不会影响保持在 0px 的上边距。

这是我的代码:

<div id="container">
    <div id="left">I want some padding here
        <div id="image">image</div>
    </div>
    <div id="middle"></div>
    <div id="right">
        <div id="text">Text</div>
    </div>
    <br style="clear: left;" />
</div>

CSS:

#container {
border: 1px solid #DCD7D4;
width: 700px;
min-height: 680px;
position: relative;
margin-left: auto;
margin-right: auto;
}
#left {
float:left;
width: 500px;
min-height: 680px;
background-color: #F6F1ED;
}
#left #image {
position: absolute;
left: 27px;
bottom: 40px;
background: green;
width: 375px;
height: 48px;
}
#right {
float: left;
width: 194px;
min-height: 680px;
background-color: #F2EEEF;
}
#right #text {
position: absolute;
left: 523px;
top: 154px;
background: yellow;
width: 150px;
height: 70px;
}
#middle {
    float:left;
    background: #0C9;
background-image:url(midbg.png);
    width: 6px;
    min-height: 680px;
 }

Answer 1

您可以将内边距与 box-sizing: border-box 一起添加到您的#left div 中，布局应保持完整

#left
{ 
   padding: x px;
   -moz-box-sizing: border-box;
   box-sizing: border-box
}