我正在尝试将图像缩略图旁边的文本对齐，例如：https://i.imgur.com/qgEvBtZ.png
我从头开始创建了一个类似的布局，这里：https://codepen.io/atnd/pen/qzaVLX
from pyspark.sql.functions import isnan, when, count, col, countDistinct`
total_count = df.count()
null_values = df.select([(count(when(isnan(c), c))/total_count).alias(c) for c in df.columns])
# Another way to do it is (ref neobot)
null_values = df.select([(sum(when(isnull(c), 1).otherwise(0))/total_count).alias(c) for c in df.columns])
df.agg(*(countDistinct(col(c)).alias(c) for c in df.columns)
如您所见，文本不会自动包裹在文本下方，而是自动包裹在img缩略图下方。我已经尝试了所有我能想到的，但是没有运气。
有人可以帮忙吗？预先谢谢你！
答案 0 :(得分：1)
您需要将图像设置为float: left（有关原因的更多信息，请参见this question）。这将做一些奇怪的事情，因为您的文本不够长，无法到达图像的底部，因此您也需要清除浮点数。最好的方法是在包含文本的跨度上使用:after。这是使其工作的一种方法：
#figcaption a img {
display: block;
margin: 0 5px 5px 0;
float: left;
}
.wistia_bento_item_name:after {
content: "";
display: block;
clear: both;
}
您还需要清理其他一些CSS，这会使情况看起来有些不对（例如，从line-height: 0px;中删除#video_player #figcaption a并删除{{1 }}中的padding-left。
答案 1 :(得分：1)
您只需要在CSS中更改#video_player #figcaption a规则
您写的是：
#video_player #figcaption a {
display: block;
font-size: 12px;
line-height: 0px;
border-bottom: 1px solid #e3e5eb;
color: #000000;
text-decoration: none;
padding: 12px 12px 13px 12px;
}
我想做的就是将display: block;更改为display: flex;，以便将img（视频缩略图）和span（视频标题）分离为两个单独的弹性项目，为什么你也试图做line-height: 0px;吗？这会使文本重叠。
这是我所做的更改：
#video_player #figcaption a {
display: flex; /* change this */
font-size: 12px;
/* line-height: 0px; remove this */
border-bottom: 1px solid #e3e5eb;
color: #000000;
text-decoration: none;
padding: 12px 12px 13px 12px;
}
希望这会有所帮助！ 编辑：img和span是内联元素（假设img和span都是单个元素，占据一行），无法适应给定宽度的文本将转到下一行
答案 2 :(得分：0)
我觉得这是一个更好的方法！ 标题位于vid缩略图下方，使其看起来完美
#video_player {
display: table;
margin: 0 auto;
background: #000;
max-width: 1140px !important;
max-height: 360px !important;
}
#firstvideo {
height: 100%;
}
#firstvideo iframe {
height: 360px;
width: 600px;
}
#video_player iframe, #video_player #figcaption {
display: table-cell;
vertical-align: top;
background: #FFFFFF;
overflow-y: scroll;
}
#video_player #figcaption {
border: 2px solid #9aacd5;
border-left: 0px;
}
#vidcontainer {
height: 360px;
width: 303px;
}
#video_player #figcaption a {
display: block;
font-size: 12px;
border-bottom: 1px solid #e3e5eb;
color: #000000;
text-decoration: none;
padding: 12px 12px 13px 12px;
}
#video_player #figcaption a:nth-of-type(7) {
border-bottom: none;
}
#figcaption a:hover {
background-color: #E3E5EB;
}
#figcaption a:selected {
background: #406acb;
color: white;
}
#figcaption a:img {
display: block;
margin: 0 5px 5px 0;
float: left;
}
.wistia_bento_item_name {
vertical-align: top;
font-family: Arial;
content: "";
display: block;
clear: both;
}
.wistia_bento_item_name:after {
vertical-align: top;
font-family: Arial;
content: "";
display: block;
clear: both;
}
#video_player #figcaption::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#video_player #figcaption::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#video_player #figcaption::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #c1daec;
}<div id="video_player">
<div id="firstvideo">
<iframe src="//fast.wistia.net/embed/playlists/jswgmiwvqy" allowfullscreen></iframe>
</div>
<div id="figcaption">
<div id="vidcontainer">
<a href="#wistia_khpjv95u1u"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/5e9af872d0c0b2c36a90b650175f270eb8e3a306.jpg?&image_crop_resized=100x60" width="100" alt="The Future of Company Tickets"><span class="wistia_bento_item_name">The Future of Company Tickets</span></a>
<a href="#wistia_rcyldd4352"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/56111fc6eed70ca28114e4a993b60a0b98919fc2.jpg?&image_crop_resized=100x60" width="100" alt="Company Tickets & the New Tax Law"><span class="wistia_bento_item_name">Company Tickets & the New Tax Law</span></a>
<a href="#wistia_wo1fhqfjpf"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/a804723abfe40dc8d08c68a40720d1b665048a2d.jpg?&image_crop_resized=100x60" width="100" alt="How Anheuser-Busch Measures Sponsorship ROI"><span class="wistia_bento_item_name">How Anheuser-Busch Measures Sponsorship ROI</span></a>
<a href="#wistia_jq9vslkedz"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/fbc60cb44f6460c81a761fe37cb667b46f4f1602.jpg?&image_crop_resized=100x60" width="100" alt="How CDW Makes Every Ticket Count"><span class="wistia_bento_item_name">How CDW Makes Every Ticket Count</span></a>
<a href="#wistia_qyx5135wzh"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/5293578ec9cd1793fc03ff7aef2ddcfba996e7ed.jpg?&image_crop_resized=100x60" width="100" alt="Providing the ROI of Comapny Sports Tickets"><span class="wistia_bento_item_name">Providing the ROI of Company Sports Tickets</span></a>
<a href="#wistia_qdmez6tsor"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/0e6c3548db9d6f27e5b482f19ededf230f6f2b01.jpg?&image_crop_resized=100x60" width="100" alt="Putting your Tickets in Salesforce"><span class="wistia_bento_item_name">Putting your Tickets in Salesforce</span></a>
<a href="#wistia_4j36xyw6cl"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/15cbe0b7232cb132c8ebf79c2e19b928db4ebe92.jpg?&image_crop_resized=100x60" width="100" alt="Building Your Own Ticket App"><span class="wistia_bento_item_name">Building Your Own Ticket App</span></a>
</div>
</div>
</div>
这不是您想要的，但希望这对您有用 你很好走！