Question

我在代码中有两个div。我的问题是，如果不触摸列表本身，就无法将两个div对齐。在我看来，列表的一侧会影响另一侧，从而会影响对齐方式。我该如何对齐两个div，以使其处于水平状态？

https://jsfiddle.net/DeathAndDecay/9mdort1q/1/

<!DOCTYPE html>
<html>

<head>
<title>Blog</title>
<style>
  h1,
  h2 {
    color: #f9ff65;
    text-shadow: rgba(0, 0, 0, 0.63) 0px 3px 5px;
  }

  h1 {
    font-size: 2.5em;
    font-weight: bolder;
    font-variant: small-caps;
  }

  h2 {
    font-size: 1.8em;
    font-style: italic;
    font-variant: small-caps;
  }

  li {
    font-family: sans-serif, Arial;
    font-size: 1em;
    text-indent: 0.6em;
  }

  .container {
    border: 5px solid black;
    padding: 15px;
    margin: 16px;
    position:
  }

  </style>
  </head>

  <body bgcolor="teal">
    <div class="container">
      <div class="container" style="display: inline-block; height: 200px">
        <h2>Favorites</h2>
        <ol>
          <li>Dark Colors</li>
          <li>Computer</li>
          <li>Foods</li>
    </ol>
      </div>
      <div class="container" style="display: inline-block; height: 200px">
        <h2>Hobbies</h2>
        <ol>
          <li>Reading Books</li>
          <li>Computer Tinkering</li>
          <li>Playing Games</li>
          <li>Listening to Music</li>
        </ol>
      </div>
    </div>




  </body>

</html>

Answer 1

您可以使用以下代码段中的flexbox检查来做到这一点，并在此处了解有关flexbox的更多信息：Flexbox

<!DOCTYPE html>
<html>

<head>
  <title>Blog</title>
  <style>
    h1,
    h2 {
      color: #f9ff65;
      text-shadow: rgba(0, 0, 0, 0.63) 0px 3px 5px;
    }
    
    h1 {
      font-size: 2.5em;
      font-weight: bolder;
      font-variant: small-caps;
    }
    
    h2 {
      font-size: 1.8em;
      font-style: italic;
      font-variant: small-caps;
    }
    
    li {
      font-family: sans-serif, Arial;
      font-size: 1em;
      text-indent: 0.6em;
    }
    
    .container {
      border: 5px solid black;
      padding: 15px;
      margin: 16px;
     display:flex;
    }
  </style>
</head>

<body bgcolor="teal">
  <div class="container">
    <div class="container" style="display: inline-block; height: 200px">
      <h2>Favorites</h2>
      <ol>
        <li>Dark Colors</li>
        <li>Computer</li>
        <li>Foods</li>
      </ol>
    </div>
    <div class="container" style="display: inline-block; height: 200px">
      <h2>Hobbies</h2>
      <ol>
        <li>Reading Books</li>
        <li>Computer Tinkering</li>
        <li>Playing Games</li>
        <li>Listening to Music</li>
      </ol>
    </div>
  </div>




</body>

</html>

如何将两个div对齐？

1 个答案: