html – Flexbox,卡片和div之外的文本之间的空格

2023年2月26日 177次阅读

在发布之前,我看到了几个问题,包括

> question
> question
> question

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

问题

卡的行为不正常：

>文本有时会走出去(我试图使用断言：保留所有)卡片,我不明白为什么
>有时两张卡之间的空间为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包装器中是好的,但是在codepen中却没有.
我肯定错过了什么,所以任何建议都会非常感激.

更新

正如评论中所建议我更新了codepen,现在你可以在右侧边栏中看到不同的卡片,你可以看到问题是：

>文字走出卡片空间
>卡片太靠近了
>侧边栏无法读取溢出的属性,在我的chrome中,因为您可以看到侧边栏有一个垂直滚动条.

最佳答案 由于您的代码很乱,我无法正确地看到它并给您一个有效的示例,但您的问题听起来很简单.要查看卡片之间的空格,您需要两件事：

>使用justify-content：space-between设置容器;
>为每张卡提供保证金

这是一个简单的例子：

.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>
点赞