Question

在发布此内容之前，我看到了几个问题，包括

，还有guide to flex-box of css tricks。但是我不明白如何解决我制作的某些卡片的渲染问题。

问题

卡的行为不正确：

文本有时不合要求（我尝试使用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 here

关于该Codepen的说明：我不明白为什么，但是在Chrome中，行到div wrapper中的布局是可以的，但是在Codepen中则不是。我肯定会丢失一些东西，因此我们将不胜感激任何建议。

更新

正如我更新了Codepen的评论中所建议的那样，现在您可以在右侧栏中看到差异卡，并且您可以看到问题是：

文本超出卡片空间
卡太近了
侧边栏无法读取溢出的属性，在我的Chrome中，您可以看到侧边栏具有垂直滚动条。

Answer 1

由于您的代码很乱，所以我看不到它，不能给您一个有效的示例，但是您的问题听起来很简单。为了查看卡之间的空间，您需要做两件事：

使用justify-content: space-between;设置容器
给每个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>

Flexbox，卡片和div外文字之间的空间

1 个答案: