> 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 ></div> <button > <span ></span> <span ></span> <span ></span> </button> <div > <div ></div> <nav > <ul > <li > <a href="#" > Home </a> </li> <li > <a href="#" > About </a> </li> <li > <a href="#" > Portfolio </a> </li> <li > <a href="#" > Contacts </a> </li> </ul> </nav> </div> <!-- Menu up above --> <!-- input,maps and cards down below --> <main> <div > <div > <div> <h2 >Search the closest restaurant</h2> </div> </div> </div> <div > <input ID="pac-input" type="text" placeholder="insert here: yourNation,yourCity,yourStreet"> </div> <div ></div> <div > <section > <div > <main > <div ID="map"></div> </main> <asIDe > </asIDe> </div> </section> </div> <div ></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 > <section > <div > <asIDe > <div > </div> </asIDe> <main > <div ><h2>Titolo del ristorante qua</h2></div> <hr> <div > </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 > <img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" > <div ><h4></h4></div> <div ></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 > <div >Card 1</div> <div >Card 2</div></div>总结
以上是内存溢出为你收集整理的html – Flexbox,卡片和div之外的文本之间的空格全部内容，希望文章能够帮你解决html – Flexbox,卡片和div之外的文本之间的空格所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）