Question

在我的项目中，我想将网页首页设置为四个部分。因此，我在内容div中定义了四个div，分别是左上，右上，左下，右下。

我想在content div中设置20px的填充，左侧边框可以，但是右侧是错误的。

上下左右超出了内容div的右边界。

我已经定义了CSS的四个部分

代码是：

<body style="background:url(./image/taiyi.jpg); height:100%; width:100%;background-repeat:no-repeat">
  <style>
   .content{
     margin-left:auto;
     padding: 20px;
     margin-right:auto;
     width: 1400px;
     height:850px;
     background-color:white;
   }
  .content .uprow{
    width: 1400px;
    height: 400px;
    text-align:center;
    border: 1px solid #e5e5e5;
  }
  .content .uprow .upleft{
    width: 600px;
    height: 400px;
    float: left;
    background-color: white;
    border: 1px solid #999;
  }
 .lm_title_con{
   width: 600px;
   height: 100px;
   padding: 10px 20px;
 }
.lm_title_con .lm_title{
   width: 85px;
   line-height: 45px;
   height: 30px;
   float: left;
   line-height: 30px;
   color: #3E6BC0;
   font-size: 18px;
   text-align: center;
   border-bottom: 1px solid #3E6BC0;
 }
.content .uprow .upright{
  width: 600px;
  height: 400px;
  float: right;
  background-color: white;
  border: 1px solid #999;
}
.content .downrow{
  width: 1400px;
  height: 400px;
  margin-top: 20px;
}
.content .downrow .downleft{
  width: 600px;
  height: 400px;
  float: left;
  border: 1px solid #999;
  background-color: white;
}
.content .downrow .downright{
  width: 600px;
  height: 400px;
  float: right;
  border: 1px solid #999;
  background-color: white;
}
 </style>

 <script type="text/javascript">
   $(function() {
    $("#header").load("header_02.html");
 });
 </script>

<div id="header"></div>    
<div class="content">
  <div class="uprow">
    <div class="upleft">
      <div class="lm_title_con">
        <div class="lm_title">
            中心宣传片
        </div>
      </div>      
    </div>
    <div class="upright"></div>
  </div>
  <div class="downrow">
    <div class="downleft"></div>
    <div class="downright"></div>
  </div>
</div>
<!--footer start-->
<div id="footer"></div>
<script>
$(function() {
    $("#footer").load("../footer_02.html");
});
</script>
<!--footer end-->
</body>

</html>

我已在内容CSS中设置了padding: 20px;。但是直立和向下的div超出了右边界。

我很困惑，谁能给我帮助？

Answer 1

希望这对您有所帮助。

请尝试使用以下CSS。

body{
 margin:0;
}

.content{
 margin-left:auto;
 padding: 20px;
 margin-right:auto;
 width: 1400px;
 height:850px;
 background-color:white;
 box-sizing: content-box; /*new added*/
}

Answer 2

您必须制作public boolean isSubscriptionsSupported() { if (myBillingClient != null) { BillingResult isSubscriptionsSupported = myBillingClient.isFeatureSupported(BillingClient.FeatureType.SUBSCRIPTIONS); return isSubscriptionsSupported.getResponseCode() == BillingClient.BillingResponseCode.OK; } return false; }，它将填充保留在div中。

box-sizing:border-box

<style>
*{
box-sizing: border-box;
}
.content{
  margin-left:auto;
  padding: 20px;
  margin-right:auto;
  width: 1400px;
  height:850px;
  background-color:white;
}
.content .uprow{
  width: 1400px;
  height: 400px;
  text-align:center;
  border: 5px solid #e5e5e5;
}
.content .uprow .upleft{
  width: 600px;
  height: 400px;
  float: left;
  background-color: white;
  border: 1px solid #999;
}
.lm_title_con{
  width: 600px;
  height: 100px;
  padding: 10px 20px;
}
.lm_title_con .lm_title{
  width: 85px;
  line-height: 45px;
  height: 30px;
  float: left;
  line-height: 30px;
  color: #3E6BC0;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid #3E6BC0;
}
.content .uprow .upright{
  width: 600px;
  height: 400px;
  float: right;
  background-color: white;
  border: 1px solid #999;
}
.content .downrow{
  width: 1400px;
  height: 400px;
  margin-top: 20px;
 }
.content .downrow .downleft{
  width: 600px;
  height: 400px;
  float: left;
  border: 1px solid #999;
  background-color: white;
}
.content .downrow .downright{
  width: 600px;
  height: 400px;
  float: right;
  border: 1px solid #999;
  background-color: white;
}
</style>

Answer 3

Add padding right to below style CSS.
.content .uprow {
    width: 1390px;
    height: 400px;
    text-align: center;
    border: 1px solid #e5e5e5;
    padding-right: 10px;
}

.content .downrow{
 width: 1390px;
    height: 400px;
    text-align: center;
    border: 1px solid #e5e5e5;
    padding-right: 10px;
}

为什么子Div超出父div右边界

3 个答案: