Question

我正在努力将6个div元素排列成每行3列的布局。目前我将它们分成两排排列，但我遇到的问题是，如果任何列的h2元素有点长，它往往会将直接位于其下方的列推下来，留下一个巨大的空间在第二行。关于如何更好地协调这一点的任何想法？

body {
    width: 100%;
    background-image: url("../img/pexels-photo-207301.jpeg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-size: cover;
    background-attachment: fixed;

    font-family: "Abel", sans-serif;
    font-size: 20px;
    color: #3b3b3b;

}

h1, h2 {
    font-family: "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif";
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px;
    padding: 0px;
    color: #111111;
    text-align: center;
}

#mainpage {
    max-width: 960px;
    padding: 20px;
    margin: 0 auto;
}

#header {
    width: 100%;
    margin: 15px auto;
}

#logo h1 {
    line-height: 150px;
    letter-spacing: -1px;
    font-size: 4.5em;
}

#six-columns {
    width: 100%;
    background-color: rgba(250, 250, 250, 0.6);   
    
}
#six-columns .column {
    float: left;
    width: 29.333%;    
    margin: 1%;
    padding: 1%;  

}


#six-columns::after {
    content: "";
    display: block;
    clear: both;
}

    <body>
        <div id="mainpage">
            <div id="header-container">
                <div id="header">
                    <div id="logo">
                        <h1> My Third Site</h1>
                    </div>
                </div>
            </div>
            <div id="six-columns">
                <div class="column">
                    <h2> Dignissim augue</h2>
                    <p>Dignissim augue aenean, fringilla maecenas. Consectetuer condimentum. Dis libero neque accumsan ipsum facilisi, neque ornare rem in ligula luctus. Elit quam tincidunt porta veniam lorem. Lobortis tempor vitae justo. Taciti suspendisse mauris, mattis a ligula velit semper pede euismod, tortor amet. Aliquam id, ut adipiscing. Morbi diam in neque, congue arcu elit maecenas, in sapien ullamcorper neque vestibulum. Leo nisl cursus turpis sit, vestibulum est ut tortor, massa hendrerit mauris orci, vestibulum in dolor eu penatibus</p>
                </div>

                <div class="column">
                    <h2> cras tellus</h2>
                    <p>Praesent nam tempus luctus vestibulum, vivamus wisi. Mauris vitae justo metus, pretium nulla eu proident morbi. Auctor vitae, felis dolor vel turpis diam. Cras morbi, duis a duis feugiat sodales ut cras, et sociis nibh tincidunt. Consequat nam nulla, interdum lectus rutrum ac penatibus mauris. Magna nisl arcu et platea a sed, cras tellus, sit nam turpis mi sodales pede nunc. Sapien donec facilisi cupiditate, suspendisse vel</p>
                </div>

                <div class="column">
                    <h2> posuere erat</h2>
                    <p>Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.</p>
                </div>

                <div class="column">
                    <h2> nostra purus</h2>
                    <p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula nullam, est posuere.</p>
                </div>

                <div class="column">
                    <h2> suscipit nostra</h2>
                    <p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula nullam, est posuere.</p>
                </div>

                <div class="column">
                    <h2> Rhoncus ornare</h2>
                    <p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula nullam, est posuere.</p>
                </div>

            </div>

            <div id="test-floats">
                <h2> Testing Floats </h2>
            </div>
        </div>

    </body>

</html>

Answer 1

这是因为您使用的是float属性。您必须clear浮动元素的left。试试这个css：

#six-columns .column:nth-child(4) {
    clear: left;
}

有关clear的详细信息，请按照此https://www.w3schools.com/cssref/pr_class_clear.asp

进行操作

body {
  width: 100%;
  background-image: url("../img/pexels-photo-207301.jpeg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Abel", sans-serif;
  font-size: 20px;
  color: #3b3b3b;
}

h1,
h2 {
  font-family: "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif";
  font-weight: bold;
  text-transform: uppercase;
  margin: 0px;
  padding: 0px;
  color: #111111;
  text-align: center;
}

#mainpage {
  max-width: 960px;
  padding: 20px;
  margin: 0 auto;
}

#header {
  width: 100%;
  margin: 15px auto;
}

#logo h1 {
  line-height: 150px;
  letter-spacing: -1px;
  font-size: 4.5em;
}

#six-columns {
  width: 100%;
  background-color: rgba(250, 250, 250, 0.6);
}

#six-columns .column {
  float: left;
  width: 29.333%;
  margin: 1%;
  padding: 1%;
}

#six-columns::after {
  content: "";
  display: block;
  clear: both;
}

#six-columns .column:nth-child(4) {
  clear: left;
}

<div id="mainpage">
  <div id="header-container">
    <div id="header">
      <div id="logo">
        <h1> My Third Site</h1>
      </div>
    </div>
  </div>
  <div id="six-columns">
    <div class="column">
      <h2> Dignissim augue Dignissim augue</h2>
      <p>Dignissim augue aenean, fringilla maecenas. Consectetuer condimentum. Dis libero neque accumsan ipsum facilisi, neque ornare rem in ligula luctus. Elit quam tincidunt porta veniam lorem. Lobortis tempor vitae justo. Taciti suspendisse mauris, mattis
        a ligula velit semper pede euismod, tortor amet. Aliquam id, ut adipiscing. Morbi diam in neque, congue arcu elit maecenas, in sapien ullamcorper neque vestibulum. Leo nisl cursus turpis sit, vestibulum est ut tortor, massa hendrerit mauris orci,
        vestibulum in dolor eu penatibus</p>
    </div>

    <div class="column">
      <h2> cras tellus</h2>
      <p>Praesent nam tempus luctus vestibulum, vivamus wisi. Mauris vitae justo metus, pretium nulla eu proident morbi. Auctor vitae, felis dolor vel turpis diam. Cras morbi, duis a duis feugiat sodales ut cras, et sociis nibh tincidunt. Consequat nam nulla,
        interdum lectus rutrum ac penatibus mauris. Magna nisl arcu et platea a sed, cras tellus, sit nam turpis mi sodales pede nunc. Sapien donec facilisi cupiditate, suspendisse vel</p>
    </div>

    <div class="column">
      <h2> posuere erat</h2>
      <p>Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu
        in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed
        sit, dignissim sem sodales.</p>
    </div>

    <div class="column">
      <h2> nostra purus</h2>
      <p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet
        sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula
        nullam, est posuere.</p>
    </div>

    <div class="column">
      <h2> suscipit nostra</h2>
      <p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet
        sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula
        nullam, est posuere.</p>
    </div>

    <div class="column">
      <h2> Rhoncus ornare</h2>
      <p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet
        sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula
        nullam, est posuere.</p>
    </div>
  </div>
  <div id="test-floats">
    <h2> Testing Floats </h2>
  </div>
</div>

如何为6个div元素

1 个答案: