Flexbox, пространство между карточками и текстом вне раздела - PullRequest
Новая
       10

Flexbox, пространство между карточками и текстом вне раздела

0 голосов
/ 04 октября 2018

До публикации я видел несколько вопросов, включая

  1. вопрос
  2. вопрос
  3. вопрос

, а также руководство по flex-box с трюками css .Однако я не понимаю, как решить проблему с рендерингом некоторых карт, которые я сделал.

Проблема

Поведение карточек не в порядке:

  • Текст иногда выходит наружу (Я пытался использовать word-break: keep all) карты, и я не понимаю, почему
  • Иногда расстояние между двумя картами составляет 0 пикселей.

Ожидаемое поведение

Карты с текстом внутри них и с учетом расстояния между ними.

Код 

.wrapper{
  min-height: 100vh;
  background-color: lightgray;
  display: flex;
  flex-direction: column;
}

.content {
  height:auto;
  flex: 1;
  background: #FAFAFA;
  display: flex;
  color: #000;
}
.columns{
  display: flex;
  flex: 1;
}
.main{
  z-index:1;
  flex: 1;
  background: #eee;
}
.sidebar{
    overflow: auto;
    text-align: center;
    z-index: 1;
    height: 100%;
  width: 40%;
  background: white;
}
.title{
    font-size: 25;
    margin-bottom: -20px;
    width: 100%;
}

.photo{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 50%;
}

.rating{
    font-size: 20px;
}

.card {
    cursor: pointer;
    text-overflow: ellipsis;
    background-color: white;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 1px 1px 50px black;
    margin:auto;
    width: 55%;
    height: 320px;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   margin-top: 50px;
   margin-bottom: 50px;
    word-break:keep-all;
    padding: 0px;
}

a{
    text-decoration: none;
    text-decoration-color: black;
    color: black;
}

.address{
    font-size: 20px;
    padding: 20px;
}
<html>
  <head>
    <title>Restosearch</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>
      <!-- Menu down below -->
    <div class="circle"></div>
    <button class="btn">
      <span class="btn__line"></span>
      <span class="btn__line"></span>
      <span class="btn__line"></span>
    </button>
    <div class="full-menu">
      <div class="layer"></div>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item">
            <a href="#" class="nav__link">
              Home
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              About
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Portfolio
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Contacts
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <!-- Menu up above -->

    <!-- Input, maps and cards down below -->
    <main>
        <div class="container">
            <div class="box">
                <div>
                    <h2 style="">Search the closest restaurant</h2>
                </div>
            </div> 
        </div>
        <div class="downBox">
                    <input id="pac-input" class="controls" type="text" placeholder="insert here: yourNation, yourCity, yourStreet">
        </div>

        <div class="divider"></div>

        <div class="wrapper">
            <section class="content">
                <div class="columns">
                    <main class="main">
                        <div id="map"></div>
                    </main>
                    <aside class="sidebar" style="background-color: gainsboro">

                    </aside>
                </div>
            </section>
        </div>

        <div class="divider"></div>

        <!-- this section will appear only when you click on a card -->

        <!-- Ricorda di settare i css per queste sezioni, il titolo deve essere circa alto 20/ 30 %  -->
        <div class="wrapperTwo detail">
           <section class="content">
                <div class="columns">
                   <aside class="sidebarTwo" style="">
                         <div class="placeInfo">

                       </div>
                    </aside>
                    <main class="mainTwo">
                      <div class="detailtitle"><h2>Titolo del ristorante qua</h2></div>
                       <hr>
                        <div class="review">

                        </div>

                    </main>
                </div>
            </section>

        </div>

        <!-- Input, maps and cards up above -->
    </main>  
  </body>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <script src="script.js"> </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=MyApi&libraries=places&callback=initAutocomplete"
         async defer></script>
</html>

Каждая карта генерируется динамически с помощью этого кода: 

  $(".sidebar").append("<div class=\"card\" id=\"" + idPlace +"\"><img src=\"" + photoMarker + " \"class=\"photo\"><div class=\"title\"><h6>" + name +"</h6></div><div class=\"rating\"><p>Rating: "  + rating + "</div class=\"address\"><p>" + address + "<div class=\"space\"></div></p></div>");

Это итоговая карта в структуре HTML: 

<div class="card">
    <img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="photo">
    <div class="title"><h4></h4></div>
    <div class="rating"></div>
    <p></p>
</div>

Codepen

codepen здесь

Примечание об этом codepen: я не понимаю, почему, но в Chrome расположение строки в div wrapper в порядке, однако в коде это не так.Я определенно что-то упускаю, так что любой совет будет по достоинству оценен.

Обновление

Как было предложено в комментариях, я обновил кодовую ручку,теперь вы можете видеть разные карты в правой боковой панели и, как видите, проблемы:

  • текст выходит за пределы поля для карточек
  • карточки расположены слишком близко
  • боковая панель не может прочитать свойство переполнения, в моем chrome, как вы можете видеть, боковая панель имеет вертикальную полосу прокрутки.

1 Ответ

0 голосов
/ 20 ноября 2018

Так как ваш код беспорядок, я не могу его правильно увидеть и привести вам рабочий пример, но ваша проблема звучит просто.Чтобы увидеть промежутки между карточками, вам нужно 2 вещи:

  1. Установите контейнер с justify-content: space-between;
  2. Дайте наценку на каждую card

Вот простой пример: 

.container{
  width: 80%;
  border: 1px solid black;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.card{
  background-color: #bada55;
  flex-grow:1;
  margin: 10px;
  height: 50px;
}
<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...