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
}

Answer 2

在此处阅读CSS框模型：http://css-tricks.com/the-css-box-model/

填充会影响整个元素的规格。

另外，这是处理各种元素的时髦填充的一个很好的技巧： http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 3

这些解决方案中的任何一个如何。它们可以在我的浏览器上运行：

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

OR

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

Answer 4

如果border-box无法正常工作，那么span应该对您有用，请查看 demo

<强> CSS

#left > span {
    padding:100px;
    position:absolute;
    height:100%;
    border:1px solid #000;

}

<强> HTML

<div id="left"> 

   <span>I want some padding here</span>
  <!-- rest of html -->

`

修改

由于您的#left内有子divs，因此您无法对其应用填充选项。
直接在padding id下的文字上需要
#left而不是子div，因此建议使用span，因为<span>是内联元素，<div>是块级元素。

什么是填补这个div的最佳方法？

4 个答案: