Question

我试图使用红色轮廓线与其下方的其他div进行顶级父div。我尝试了宽度的一些百分比，但它们总是关闭

div2是具有3个div的部分的指定div

＆＃13;

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
#header {
  width: 100%;
  height: 100px;
  background: #0C2074;
  font-family: Arial, Helvetica, sans-serif;
  ;
  color: #000000;
  text-align: left;
  margin-top: 10px;
  font-size: 200%;
  margin: 0 auto;
}
#usbanklogo {
  width: 40%;
  height: 100%;
  text-align: left;
  float: left;
  margin: 0 auto;
  /*margin-top: 10px;*/
  padding-left: 10px;
  box-sizing: border-box;
}
#dealerservicesdiv {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: left;
  line-height: 100px;
  float: left;
  font-size: 1.2em;
  font-weight: bolder;
  color: #FFF;
  box-sizing: border-box;
}
div {
  width: 100%;
  height: 30%;
  float: left;
  color: #fff;
  box-sizing: border-box;
}
#div1 {
  /*position: relative;*/
  /*width: 30%;
        height: 10%;*/
  width: 270px;
  height: 60px;
  text-align: left;
  margin-left: 5%;
  color: #ff0000;
}
#div2 {
  border: 4px solid#ff0000;
  /*position: relative;*/
  clear: both;
  /*width: 90%;*/
  width: 1200px;
  height: 200px;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 10px;
}
#div2 > div {
  /*width:15%; 
        height: 100%;*/
  width: 170px;
  height: 175px;
  text-align: center;
  float: left;
  margin: auto;
  margin-top: 10px;
  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-right: 9.165%;
  margin-left: 9.165%;
  padding-bottom: 5px;
  /*padding-left: 5px;
        padding-right: 5px;*/
  border: 5px solid#DDD;
  box-sizing: border-box;
}
#div3 {
  position: relative;
  /*width: 90%;*/
  width: 1200px;
  height: 200px;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 10px;
}
#div3 > div {
  width: 170px;
  height: 175px;
  text-align: center;
  float: left;
  margin: auto;
  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-right: 5%;
  margin-left: 5%;
  padding-top: 5px;
  padding-right: 5px;
  ;
  padding-bottom: 5px;
  padding-left: 5px;
  border: 5px solid#DDD;
  box-sizing: border-box;
}
#div4 {
  position: relative;
  /*width: 90%;*/
  width: 1200px;
  height: 200px;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 10px;
}
#div4 > div {
  /*width:15%;
        height: 85%;  */
  width: 170px;
  height: 175px;
  text-align: center;
  float: left;
  margin: auto;
  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-right: 5%;
  margin-left: 5%;
  padding-top: 5px;
  padding-right: 5px;
  ;
  padding-bottom: 5px;
  padding-left: 5px;
  border: 5px solid#DDD;
  box-sizing: border-box;
}
/*No hover for mobile app*/

#div2 > div:hover {
  background-color: #ff3333;
}
#div3 > div:hover {
  background-color: #ff3333;
}
#div4 > div:hover {
  background-color: #ff3333;
}
#performance {
  background: #67B2E8;
}
#pricing {
  background: #67B2E8;
}
#credit {
  background: #67B2E8;
}
#sales {
  background: #67B2E8;
}
#portfolio {
  background: #67B2E8;
}
#quality {
  background: #67B2E8;
}
#finance {
  background: #67B2E8;
}
#admin {
  background: #67B2E8;
}
#dealer {
  background: #67B2E8;
}
#recent {
  background: #67B2E8;
}
#support {
  background: #67B2E8;
}
/*Link Behavior*/

a:link {
  COLOR: #000000;
  TEXT-DECORATION: none
}
a:visited {
  COLOR: #000000;
  TEXT-DECORATION: none
}
a:active {
  COLOR: #000000;
  TEXT-DECORATION: none
}
/*Padding for font awesome*/

i {
  padding-top: 15px;
}
/*Footer*/

#footer {
  height: 40px;
  background: #DDD;
  /*color: #000000;*/
  font-size: 120%;
  margin: 0 auto;
  color: #666666;
}
#footer > div {
  width: 33.33%;
  height: 100%;
  text-align: center;
  float: left;
  margin: auto;
  padding-top: 5px;
  padding-right: 5px;
  ;
  padding-bottom: 5px;
  padding-left: 5px;
  box-sizing: border-box;
  color: #666666
}

＆＃13;

<div id="wrapper">
  <header>
    <div id="header">

      <div id="dealerservicesdiv">
        <div id="usbanklogo">
          <!--<img src="image/usbankLogo2.png" alt="Best In Us">-->
        </div>
        <!--DEALER SERVICES-->
        <!--<img src="image/banner.png" alt="Best In Us">-->
      </div>
    </div>
  </header>

  <div id="div1">
    <h1>Reporting</h1>
  </div>

  <div id="div2">
    <div id="performance">
      <!--File Icon-->
      <a href="#">
        <i class="fa fa-bar-chart-o fa-4x" aria-hidden="true"></i>
      </a>
      <h2>Performance Analytics</h3>
                    </div>
                    
                    <div id = "pricing">
                        <a href="#">                    
                            <i class="fa fa-dollar fa-4x" aria-hidden="true"></i>
                        </a>
                        <h2>Pricing & Profitability</h3>
                    </div>
    
                    <div id = "credit">
                        <a href="#">                    
                            <i class="fa fa-credit-card-alt fa-4x" aria-hidden="true"></i>
                        </a>
                        <h2>Credit Risk</h3>
                    </div> 
                </div>
    
                <div id="div3">
                    <div id = "sales">
                        <!--Bank Icon-->
                        <i class="fa fa-book fa-3x" aria-hidden="true"></i>
                        <h2>Sales/Credit</h2>
    </div>
    <div id="portfolio">
      <!--Automobile Icon-->
      <i class="fa fa-automobile fa-3x" aria-hidden="true"></i>
      <h2>Portfolio</h2>
    </div>
    <div id="quality">
      <!--Balance Scale Icon-->
      <i class="fa fa-balance-scale fa-3x" aria-hidden="true"></i>
      <h2>Quality/Audit</h2>
    </div>

    <div id="finance">
      <!--Money Icon-->
      <i class="fa fa-money fa-3x" aria-hidden="true"></i>
      <h2>Finance</h2> 
    </div>

  </div>

  <div id="div4">

    <div id="admin">
      <!--Support Icon-->
      <a href="#">
        <i class="fa fa-support fa-3x" aria-hidden="true"></i>
      </a>
      <h2>Admin</h2>
    </div>
    <div id="dealer">
      <!--Commenting Icon-->
      <i class="fa fa-commenting fa-3x" aria-hidden="true"></i>
      <h2>Dealer Comments</h2>

    </div>

    <div id="recent">
      <!--Thum Tack Icon-->
      <i class="fa fa-thumb-tack fa-3x" aria-hidden="true"></i>
      <h2>Recent Visits</h2>
    </div>

    <div id="support">
      <i class="fa fa-phone fa-3x" aria-hidden="true"></i>
      <h2>Support</h2> 
    </div>

  </div>
 
  <footer>
    <div id="footer">
      <div id="usbnet">
        <a href="#">
          <span>USBNet</span>
        </a>
      </div>

      <div id="bestinus">
        <a href="#">
          <span>Best In Us</span>
        </a>
      </div>

      <div>
        <span>© 2016 U.S Bancorp. All Rights Reserved.</span>
      </div>


    </div>
  </footer>

＆＃13;

Answer 1

尝试使用outline代替border。参数是相同的，outline不会像border那样影响布局。（您还需要重置您在#div2上使用的CSS，以匹配其他div上的CSS。）

如何将我的顶级父div与其下方的div对齐？

1 个答案: