文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >对齐文本并使其与图像相邻换行

问对齐文本并使其与图像相邻换行
EN

Stack Overflow用户
提问于 2019-06-19 11:51:36
回答 3查看 76关注 0票数 1

我尝试将图片缩略图旁边的文本对齐，如下所示：https://i.imgur.com/qgEvBtZ.png

我从头开始创建了类似的布局，如下所示：https://codepen.io/atnd/pen/qzaVLX

​

代码语言：javascript
复制
    #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;
        line-height: 0px;
        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;
    }

    .wistia_bento_item_name {
        vertical-align: top;
        font-family: Arial;
        padding-left: 2%;
    }

    #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;
    }
代码语言：javascript
复制
    <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>

​

如你所见，文本不会自动换行，它会自动换行到img缩略图的下面。我试了我能想到的所有方法，但没有成功。

有人能帮上忙吗？提前谢谢你！

css
html
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-06-19 13:15:30

你只需要在css中修改你的#video_player #figcaption a规则

你写的是：

代码语言：javascript
复制
#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(视频标题)将作为两个单独的flex项分开，而且你为什么要尝试做line-height: 0px;？这会使文本重叠。

以下是我所做的更改：

代码语言：javascript
复制
#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;
    }

希望这能有所帮助！edit: img和span是内联元素(假设img和span都是占用一行的单个元素)，无法适应给定宽度的文本将转到下一行

票数 1
EN

Stack Overflow用户

发布于 2019-06-19 12:19:35

您需要将图像设置为float: left (有关原因的更多信息，请参阅this question )。这会做一些奇怪的事情，因为你的文本不够长，不能到达图像的底部，所以你也需要清除浮动。最好的方法是在包含文本的跨度上使用:after。这里有一种让它工作的方法：

代码语言：javascript
复制
#figcaption a img {
  display: block;
  margin: 0 5px 5px 0;
  float: left;
}

.wistia_bento_item_name:after {
  content: "";
  display: block;
  clear: both;
}

您还需要清理一些其他的CSS，它们会让事情看起来有点不对劲(比如从#video_player #figcaption a中删除line-height: 0px;，从.wistia_bento_item_name中删除padding-left )。

票数 1
EN

Stack Overflow用户

发布于 2019-06-19 12:48:02

我觉得这是一种更好的方式！标题被放置在视频缩略图的下方，这使得它看起来很完美

​

代码语言：javascript
复制
 #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;
    }
代码语言：javascript
复制
<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>

​

这不是您想要的方式，但是，希望这将为您工作，您可以继续！！

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56659800

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档