html - 从父类覆盖最大宽度

Question

我正在为移动和桌面尺寸使用响应式网格布局。我的目标是将页脚分成两行，并在它们之间添加一条适合整个屏幕大小的线。但是我有一个桌面尺寸为 ma​​x-width: 1700px 的容器类，所以为了实现我的目标，我创建了一个类，中间线 with max-width: none (还有 initial)但仍然继承了容器的最大宽度。这是我的代码

/********CSS*******/
.container{
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1170px;
}

@media(min-width: 48em){
   .container > .intermediate-line{
       max-width:none;
       border-top: solid 1px;  
   }
}
/******************/

/*******HtML*******/
<footer class="background-primary">
<div class="container">
  <div class="row">
    <div class="col-1-4">logo</div>
    <div class="col-1-4">address</div>
    <div class="col-1-4">Phone Number</div>
    <div class="col-1-4">Social Media</div>
  </div>

  <div class="intermediate-line"></div> 

  <div class="row">
    <div class="col-1-4">copyright</div>
    <div>Privacy Policy</div>
    <div>Terms of Use</div>
  </div>
</div>

Answer 1

只需制作两个容器并将行的最大宽度设置为 100%，无论容器宽度如何，它都会拉伸(stretch)到整个屏幕

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1170px;
}
.intermediate-line {
  max-width: 100%;
  border-top: 1px solid;
 }
.containerx {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 70px;
}
.intermediate-linex {
  max-width: auto;
  border-top: 1px solid;
 }
.containery {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1170px;
}
.background-primaryy
{max-width: 180px;}
.intermediate-liney {
  max-width: initial;
  border-top: 1px solid;
 }

<footer class="background-primary">
  <div class="container">
    <div class="row">
      <div class="col-1-4">logo</div>
      <div class="col-1-4">address</div>
      <div class="col-1-4">Phone Number</div>
      <div class="col-1-4">Social Media</div>
    </div>
  </div>
  <div class="intermediate-line"></div>
  <div class="container">
    <div class="row">
      <div class="col-1-4">copyright</div>
      <div>Privacy Policy</div>
      <div>Terms of Use</div>
    </div>
  </div>
  </footer>

<br><br>
<footer class="background-primaryx">
  <div class="containerx">
    <div class="row">
      <div class="col-1-4">logo</div>
      <div class="col-1-4">address</div>
      <div class="col-1-4">Phone Number</div>
      <div class="col-1-4">Social Media</div>
    </div>
 
  <div class="intermediate-linex"></div>
 
    <div class="row">
      <div class="col-1-4">copyright</div>
      <div>Privacy Policy</div>
      <div>Terms of Use</div>
    </div>
  </div>
  </footer>
<br><br>
<footer class="background-primaryy">
  <div class="containery">
    <div class="row">
      <div class="col-1-4">logo</div>
      <div class="col-1-4">address</div>
      <div class="col-1-4">Phone Number</div>
      <div class="col-1-4">Social Media</div>
    </div>
 
  <div class="intermediate-liney"></div>
 
    <div class="row">
      <div class="col-1-4">copyright</div>
      <div>Privacy Policy</div>
      <div>Terms of Use</div>
    </div>
  </div>
  </footer>