1

我有一个 CSS 布局问题。在我的网站@ 763px 断点的投资组合部分中，我想要 3 行，每行 2 列。我有这个。

[.col] [.col]
[.col] [.col]
[.col] [.col]

但是从 926px - 978px 我的列分解，然后我得到 4 行这样的：

[.col] [.col]
[.col]
[.col] [.col]
[.col]

为什么会这样？解决方案是什么？谢谢你。

  main {
    margin: 55px 0px -30px 0px;
    background: linear-gradient(transparent, rgba(102, 194, 255, 0.4) 10%, transparent 99%);
    padding-bottom: 5rem;
  }

  h2 {
    text-align: center;
    margin: 5rem 0;
    font-size: 1.6rem;
  }

  h3 {
    color: #353535;
    font-size: 1.3rem;
    margin: 1.2rem 0;
  }

  .col {
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
  }

  .col p {
    width: 90%;
    margin: 0 auto;
  }

  .col img {
    width: 95%;
  }

/*====== 768px ==== */

@media (min-width: 768px) {

  .wrapper { padding: 10px 20px 0px 20px; }
  
  main {
    width: 100%;
  }

  .col {
    float: left;
    width: 47%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    display: inline-block;
    text-align: center;
    vertical-align: top;
  }

  .col h3 {
    font-size: 1.5rem;
  }

drag to resize
<main>

    <h2 id="portfolio">Portfolio</h2>
<!-- first row -->
    <div class="row-content clearfix">
      <div class="col">
        <img src="images/portfolio-1.png">
        <h3>Marketing Page</h3>
        <p>This project shows the front page of a marketing webiste meant for a specific business I'm interested in.</p>
      </div>
      <div class="col">
        <img src="images/portfolio-2.png">
        <h3>Search Page</h3>
        <p>This project searches through a specific database to find information that the user is trying to lookup.</p>
      </div>
      <div class="col">
        <img src="images/portfolio-3.png">
        <h3>Travel App</h3>
        <p>This project compares travel times based on different transportation methods and tells you the best.</p>
      </div>
<!-- second row -->
      <div class="col">
        <img src="images/portfolio-4.png">
        <h3>Map of Favorite Sports</h3>
        <p>This project uses mapping apps to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p>
      </div>
      <div class="col">
        <img src="images/portfolio-5.png">
        <h3>Photo Gallery</h3>
        <p>This project shows pictures from a recent trip to the viewer and allos them to easily navigate through photos.</p>
      </div>
      <div class="col">
        <img src="images/portfolio-6.png">
        <h3>Calculator</h3>
        <p>Somone can enter in the numbers they want and press the big blue button and get the result.</p>
      </div>
    </div>

  </main>

drag to resize

4

2 回答 2

2

您的问题是其中一个 div 高于另一个，然后，浮动逻辑会将第三个 div 放在第一个 div 的左侧。如果您添加边框，您会更清楚地看到它。由于第一个 div 高于第二个，第三个 div 仍然是浮动到第一个 div 的地方。

如果你给他们固定的高度，它会解决问题。

但是，我建议使用不同的布局。以弹性为例：

添加到容器：

.row-content{
   display: flex;
   flex-wrap: wrap;
}

并且对于每个 col ：

flex-grow: 1;
flex-basis: 47%;
flex-shrink: 0;


main {
    margin: 55px 0px -30px 0px;
    background: linear-gradient(transparent, rgba(102, 194, 255, 0.4) 10%, transparent 99%);
    padding-bottom: 5rem;
  }

  h2 {
    text-align: center;
    margin: 5rem 0;
    font-size: 1.6rem;
  }

  h3 {
    color: #353535;
    font-size: 1.3rem;
    margin: 1.2rem 0;
  }
  .row-content{
    display: flex;
    flex-wrap: wrap;
  }
  .col {
    flex-grow: 1;
    flex-basis: 47%;
    flex-shrink: 0;
    text-align: center;
    margin-bottom: 15px;
  }

  .col p {
    width: 90%;
    margin: 0 auto;
  }

  .col img {
    width: 95%;
  }

/*====== 768px ==== */

@media (min-width: 768px) {

  .wrapper { padding: 10px 20px 0px 20px; }
  
  main {
    width: 100%;
  }

  .col {
    float: left;
    width: 47%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    display: inline-block;
    text-align: center;
    vertical-align: top;
  }

  .col h3 {
    font-size: 1.5rem;
  }

drag to resize
<main>

    <h2 id="portfolio">Portfolio</h2>
<!-- first row -->
    <div class="row-content clearfix">
      <div class="col">
        <img src="images/portfolio-1.png">
        <h3>Marketing Page</h3>
        <p>This project shows the front page of a marketing webiste meant for a specific business I'm interested in.</p>
      </div>
      <div class="col">
        <img src="images/portfolio-2.png">
        <h3>Search Page</h3>
        <p>This project searches through a specific database to find information that the user is trying to lookup.</p>
      </div>
      <div class="col">
        <img src="images/portfolio-3.png">
        <h3>Travel App</h3>
        <p>This project compares travel times based on different transportation methods and tells you the best.</p>
      </div>
<!-- second row -->
      <div class="col">
        <img src="images/portfolio-4.png">
        <h3>Map of Favorite Sports</h3>
        <p>This project uses mapping apps to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p>
      </div>
      <div class="col">
        <img src="images/portfolio-5.png">
        <h3>Photo Gallery</h3>
        <p>This project shows pictures from a recent trip to the viewer and allos them to easily navigate through photos.</p>
      </div>
      <div class="col">
        <img src="images/portfolio-6.png">
        <h3>Calculator</h3>
        <p>Somone can enter in the numbers they want and press the big blue button and get the result.</p>
      </div>
    </div>

  </main>

drag to resize

于 2018-11-13T17:03:22.127 回答
1

我无法在给定的分辨率之间重现此错误，但我最好的预感是由于文本内容的差异。尝试对描述的相同文本内容执行相同的操作，应该没问题。如果是这种情况，您必须为不一致的文本内容添加最小高度。

.col p {
  width: 90%;
  margin: 0 auto;
  min-height: 100px;
}
于 2018-11-13T16:52:23.640 回答