Question

您好我正在尝试将div放入div中但第二个将在左侧和右侧填充。

我得到的结果是一个蓝色的div正在推出黑色边界的div＆＃39;页面

小提琴在右边显示一点点。一个网页显示它高达50px所以它应该是y填充左，右，每个25，但我不知道错误来自哪里代码 http://jsfiddle.net/124a0yd9/

感谢所有

CSS：

.page{
border:solid 4px black;
width:100%;
}

.slogan_c {
    color: #0099cc;
    background-color: red;
    font-weight: bold;
        font-size:8px;
margin-top:40px;
margin-bottom:10px;
    width: 100%
padding-left:5px;
padding-right:5px;
border:solid 1px red;

}



.slogan_f{
border:solid 1px pink;
        color: #ffffff;
    background-color: blue;
font-weight: bold;
        font-size:30px;
margin-top:40px;
margin-bottom:10px;
    width: 100%;
padding-left:35px;
padding-right:35px;

}

HTML：

<div class='page'>

<DIV class='slogan_f'>
Texte 1, Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,
</DIV>
<BR><BR><BR>
<DIV class='slogan_c'>
TExte 2, TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,
</DIV>

</DIV>

Answer 1

您必须使用填充（左+右）减去总宽度 - 边框大小以达到100％宽度。

.slogan_f{ 
  width: calc(100% - 72px);
}

总div宽度（100％） - 左边填充（35px） - 右边填充（35px） - 边框左边（1px） - 边框右边（1px）

工作小提琴http://jsfiddle.net/124a0yd9/2/

Answer 2

更改 .slogan_f

.slogan_f {
width :auto}

<强> 代码：

＆＃13;

.page {
  border: solid 4px black;
  width: 100%;
}
.slogan_c {
  color: #0099cc;
  background-color: red;
  font-weight: bold;
  font-size: 8px;
  margin-top: 40px;
  margin-bottom: 10px;
  width: 100% padding-left: 5px;
  padding-right: 5px;
  border: solid 1px red;
}
.slogan_f {
  border: solid 1px pink;
  color: #ffffff;
  background-color: blue;
  font-weight: bold;
  font-size: 30px;
  margin-top: 40px;
  margin-bottom: 10px;
  width: auto;
  padding-left: 35px;
  padding-right: 35px;
}

＆＃13;

<div class='page'>

  <DIV class='slogan_f'>
    Texte 1, Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,Texte 1,
  </DIV>
  <BR>
  <BR>
  <BR>
  <DIV class='slogan_c'>
    TExte 2, TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,TExte 2,
  </DIV>

</DIV>

＆＃13;

Answer 3

那是因为填充积累了你的宽度：

所以你的宽度为100％+（35px * 2）......导致div比父级宽。

Answer 4

你的div + 100％宽度有70px填充，你需要删除边框或将其更改为0。 border：solid 0px pink;

Answer 5

将其划分为内部div：box-sizing: border-box;，您可以使用所需的任何填充将内部宽度赋予100％。

padding将div破坏为div

5 个答案: