Question

我正在尝试创建一个博客，但是，在添加了一个来自W3Schools的下拉菜单后，一切都变得混乱了。我是HTML的新手，我不明白为什么我的利润被搞砸了。

<Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange} />
            { route === 'home'
              ? <div>
                  <Logo />
                  <Rank
                    name={this.state.user.name}
                    entries={this.state.user.entries}
                  />
                  <ImageLinkForm
                    onInputChange={this.onInputChange}
                    onButtonSubmit={this.onButtonSubmit}
                  />
                  <FaceRecognition box={box} imageUrl={imageUrl} />
                </div>
              : (
                 route === 'signin'
                 ? <Signin loadUser={this.loadUser} onRouteChange={onRouteChange}/>
                 : <Register loadUser={this.loadUser} onRouteChange={onRouteChange}/>
                )
            }
            <Footer />
          </div>
        );
      }
    }

    export default App;

    body, html {
      height: 100%;
      margin: 0;
      font-family: 'Roboto';
      color: #232323;
      background-color: #ffffff;
      text-align: center;
    }
      .bgimg-1{
      position: relative;
      opacity: 0.8;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("landingpage.jpg");
      min-height: 100%;
    }
    .navbar {
      overflow: hidden;
      background-color: #333;
    }
    
    .navbar a {
      float: left;
      font-size: 16px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .dropdown {
      float: left;
      overflow: hidden;
    }
    
    .dropdown .dropbtn {
      font-size: 16px;  
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font: inherit;
      margin: 0;
    }
    
    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: #41bc3e;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      width: 100%;
      left: 0;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .dropdown-content .header {
      background: #41bc3e;
      padding: 16px;
      color: white;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      background-color: #ccc;
      height: 250px;
    }
    
    .column a {
      float: none;
      color: black;
      padding: 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .column a:hover {
      background-color: #ddd;
    }
    
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        height: auto;
      }
    }
    .checked {
        color: orange;
    }
    p {
      margin-right: 600px;
      margin-left: 600px;
    }
    .veryveryinterestingh1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }
    .verycoolheader {
      background: #232323;
      text-align: center;
    }
    .caption {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      color: #000;
      opacity: 0.99;
    }
    .caption span.border {
      background-color: #111;
      color: #41bc3e;
      padding: 18px;
      font-size: 25px;
      letter-spacing: 2px;
      opacity: 0.99;
    }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        margin-top: 0;
        margin-bottom: 0;
    }
    ul {
      columns: 2;
      -webkit-columns: 2;
      -moz-columns: 2;
      margin-right: 600px;
      margin-left: 600px;
    }
     @media all and (max-width: 768px){
       body{
         padding-left: 30px !important;
         padding-right: 30px !important;
       }
     }

垃圾箱：

Answer 1

您只需在.column中添加box-sizing: border-box;

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

因为每列有10px。列宽为33.33％+ 10px + 10px，因此页边距很乱。框大小：border-box在元素的总宽度和高度中包括padding和border，因此宽度将分别为padding-left：10px和padding-right 10px的33.33％。

如何解决HTML / CSS中的边距问题和div问题？

1 个答案: