Question

我有div的网格包裹在其他div中。出于某种原因，当任何网格div的内容与其他div相比不是相同的长度或类型时，网格开始变得非常奇怪并且这些div弹出不合适。

我尝试按照类似问题的建议将它们与margin: 0 auto和text-align: center对齐，但问题似乎根本无法解决。任何提示将不胜感激。

* {
    box-sizing: border-box;
}

body {
    height: 100%;
    font-family: Arial;
    padding: 0px;
    margin: 0px;
    background: white;
}

.column {
    float: left;
    padding: 10px;
}

.column.middle {
    width: 50%;
    border: 1px solid black;
}

.main {
    text-align:center;
}

.column.side {
    height: 100%;
    width: 25%;
    background-color: #ddd;
    padding-left: 20px;
    border: 1px solid black;
}

.cells {
    display: inline-block;
    height: 150px;
    width: 150px;
    line-height: 150px;
    text-align: center;
    border: 1px solid black;
    margin: 1px;
}

@media (max-width: 800px) {
    .column.side, .column.middle {   
        width: 100%;
        padding: 0;
    }
}

@media (max-width: 400px) {
    .topnav a {
        float: none;
        width:100%;
    }
}

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>

<body>

    <div class="row">
        <div class="column side">
          <div>
            <p>Side column left</p>
          </div>
        </div>
        
        <div class="column middle">
            <div class="main">
              <div class="cells">1</div>
              <div class="cells">2</div>
              <div class="cells"></div>
              <div class="cells">4</div>
              <div class="cells"><p>5</p></div>
              <div class="cells">6</div>
            </div>
        </div>

        <div class="column side">
          <div>
            <p>Side column right</p>
          </div>
        </div>
    </div>

</body>

</html>

Answer 1

您需要在vertical-align类上设置.cells属性：

＆＃13;

* {
  box-sizing: border-box;
}

body {
  height: 100%;
  font-family: Arial;
  padding: 0px;
  margin: 0px;
  background: white;
}

.header {
  padding: 20px;
  font-size: 20px;
  text-align: center;
  background: #ddd;
}

.topnav {
  overflow: hidden;
  background-color: white;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.column {
  float: left;
  padding: 10px;
}

.column.middle {
  width: 50%;
  border: 1px solid black;
}

.main {
  text-align: center;
}

.column.side {
  height: 100%;
  width: 25%;
  background-color: #ddd;
  padding-left: 20px;
  border: 1px solid black;
}

.cells {
  display: inline-block;
  height: 150px;
  width: 150px;
  line-height: 150px;
  text-align: center;
  border: 1px solid black;
  margin: 1px;
  vertical-align:top;
}

form {
  border: 1px solid black;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Footer */

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  /* margin-top: 20px; */
}

@media (max-width: 800px) {
  .column.side,
  .column.middle {
    width: 100%;
    padding: 0;
  }
}

@media (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

＆＃13;

<header>
  <div class="header">
    <h2>Header Placeholder</h2>
  </div>
</header>

<div class="topnav">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>


<div class="row">
  <div class="column side">
    <div>
      <p>Side column left</p>
    </div>
  </div>

  <div class="column middle">
    <div class="main">
      <div class="cells">1</div>
      <div class="cells">2</div>
      <div class="cells"></div>
      <div class="cells">4</div>
      <div class="cells">
        <p>5</p>
      </div>
      <div class="cells">6</div>
    </div>
  </div>

  <div class="column side">
    <div>
      <p>Side column right</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

＆＃13;

在包装器div中对齐具有不同内容的div

1 个答案: