Нежелательный макет столбца HTML / CSS

Question

У меня проблема с макетом 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

Answer 1

Ваша проблема в том, что один из элементов div выше другого, тогда логика с плавающей точкой поместит третий элемент div слева от первого элемента div. Если вы добавите границы, вы увидите это более четко. Так как первый div выше второго, третий div все еще является местом, куда можно перейти к первому div.

Если вы дадите им фиксированную высоту, это решит проблему.

НО, я предлагаю использовать другой макет. Flex например:

Добавить в контейнер:

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

и для каждого столбца:

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

Answer 2

Я не могу воспроизвести эту ошибку между данными разрешениями, но моя лучшая догадка связана с различием в текстовом содержимом. Попробуйте сделать то же самое с тем же текстовым содержанием для описания, и все должно быть в порядке. Если это так, вы должны добавить минимальную высоту к несогласованному текстовому содержимому.

.col p {
  width: 90%;
  margin: 0 auto;
  min-height: 100px;
}