Адаптивный контейнер столбца - PullRequest
Новая
       258

Адаптивный контейнер столбца

0 голосов
/ 07 августа 2020

У меня проблема с моим контейнером, мне удалось исправить это с помощью встроенного порядка, но я должен располагать его в порядке блоков (буквы должны совпадать слева направо).

I ' Я пытался установить высоту контейнера, но я не могу позволить второй строке «s coop» переместиться вправо. Если я сделаю это с установленной высотой в px или rem, я все пойму правильно, но как только экран станет на пиксель больше, он растянется. Может ли кто-нибудь помочь мне с этой проблемой? пример

HTML: 

.letter-block-wrapper {
  display: flex;
  flex-direction: column;
  flex-flow: column wrap;
  block-size: 100%;
}

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/letter-background.jpg);
  background-size: cover;
  position: relative;
  inline-size: 50%;
  border-radius: 5%;
  margin-bottom: 2%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.circle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  inline-size: 85%;
  block-size: 85%;
  border-radius: 50%;
  background-image: url(../images/circle-background.jpg);
  background-size: cover;
}

.letter {
  display: flex;
  color: #FF8C42;
  font-family: 'Press Start 2P', cursive;
}

.letter P {
  margin: 0;
  font-size: 8vw;
  align-items: center;
  justify-content: center;
}

@media only screen and (min-width:720px) {
  .square {
    inline-size: 49%;
  }
}

@media only screen and (min-width:1024px) {
  .square {
    inline-size: 33%;
  }
}
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <section>
    <h2>Letterblokjes</h2>
    <div class="letter-block-wrapper">
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>L</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>O</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>I</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>L</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>O</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>I</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 07 августа 2020 

       /*  6 Column Letter Container  */
    

    .square {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url(../images/letter-background.jpg);
        background-size: cover;
        position: relative;
        inline-size: 50%;
        border-radius: 5%;
        margin-bottom: 2%;
    }
    
    .square:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }
    
    .circle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        inline-size: 85%;
        block-size: 85%;
        border-radius: 50%;
        background-image: url(../images/circle-background.jpg);
        background-size: cover;
    }
    
    .letter {
        display: flex;
        color: #FF8C42;
        font-family: 'Press Start 2P', cursive;
    }
    
    .letter P {
        margin: 0;
        font-size: 8vw;
        align-items: center;
        justify-content: center;
    }
    
    @media only screen and (min-width:720px) {
        .square {
            inline-size: 49%;
        }
    }
    
    @media only screen and (min-width:1024px) {
        .square {
            inline-size: 33%;
        }
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--  6 Column Letter Container  -->
    <section>
        <h2>Letterblokjes</h2>
       <div class="container">
        <div class="letter-block-wrapper row">
            <div class="col-2 square">
                <div class="circle">
                    <div class="letter">
                        <p>L</p>
                    </div>
                </div>
            </div>
            <div class="col-2 square">
                <div class="circle">
                    <div class="letter">
                        <p>O</p>
                    </div>
                </div>
            </div>
            <div class="col-2 square">
                <div class="circle">
                    <div class="letter">
                        <p>I</p>
                    </div>
                </div>
            </div>
            <div class="col-2 square">
                <div class="circle">
                    <div class="letter">
                        <p>L</p>
                    </div>
                </div>
            </div>
            <div class="col-2 square">
                <div class="circle">
                    <div class="letter">
                        <p>O</p>
                    </div>
                </div>
            </div>
            <div class="col-2 square">
                <div class="circle">
                    <div class="letter">
                        <p>I</p>
                    </div>
                </div>
            </div>
         </div>
      </div>
    </section>

Я использовал bootstrap container и col

0 голосов
/ 07 августа 2020

Я предполагаю, что это именно то, что вы ищете. 

.letter-block-wrapper {
  display: flex;
  flex-direction: column;
  flex-flow: row nowrap;
  block-size: 100%;
}

Обратите внимание, что я изменил: 

flex-direction: column wrap;
flex-flow: column;

на 

flex-direction: column;
flex-flow: row nowrap;


.letter-block-wrapper {
  display: flex;
  flex-direction: column;
  flex-flow: row nowrap;
  block-size: 100%;
}

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/letter-background.jpg);
  background-size: cover;
  position: relative;
  inline-size: 50%;
  border-radius: 5%;
  margin-bottom: 2%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.circle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  inline-size: 85%;
  block-size: 85%;
  border-radius: 50%;
  background-image: url(../images/circle-background.jpg);
  background-size: cover;
}

.letter {
  display: flex;
  color: #FF8C42;
  font-family: 'Press Start 2P', cursive;
}

.letter P {
  margin: 0;
  font-size: 8vw;
  align-items: center;
  justify-content: center;
}

@media only screen and (min-width:720px) {
  .square {
    inline-size: 49%;
  }
}

@media only screen and (min-width:1024px) {
  .square {
    inline-size: 33%;
  }
}
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <section>
    <h2>Letterblokjes</h2>
    <div class="letter-block-wrapper">
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>L</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>O</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>I</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>L</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>O</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>I</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

После более внимательного прочтения вопроса я вижу, что вам может понадобиться 2 строки LOI. Для достижения sh этого я сделал 2 <div class="letter-block-wrapper"> с LOI в каждом. 

.letter-block-wrapper {
  display: flex;
  flex-direction: column;
  flex-flow: row nowrap;
  block-size: 100%;
}

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/letter-background.jpg);
  background-size: cover;
  position: relative;
  inline-size: 50%;
  border-radius: 5%;
  margin-bottom: 2%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.circle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  inline-size: 85%;
  block-size: 85%;
  border-radius: 50%;
  background-image: url(../images/circle-background.jpg);
  background-size: cover;
}

.letter {
  display: flex;
  color: #FF8C42;
  font-family: 'Press Start 2P', cursive;
}

.letter P {
  margin: 0;
  font-size: 8vw;
  align-items: center;
  justify-content: center;
}

@media only screen and (min-width:720px) {
  .square {
    inline-size: 49%;
  }
}

@media only screen and (min-width:1024px) {
  .square {
    inline-size: 33%;
  }
}
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <section>
    <h2>Letterblokjes</h2>
    <div class="letter-block-wrapper">
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>L</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>O</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>I</p>
          </div>
        </div>
      </div>
    </div>
    <div class="letter-block-wrapper">
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>L</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>O</p>
          </div>
        </div>
      </div>
      <div class="square">
        <div class="circle">
          <div class="letter">
            <p>I</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...