文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >用缩略图对齐文本(2行)

问用缩略图对齐文本(2行)
EN

Stack Overflow用户
提问于 2016-01-07 13:29:38
回答 3查看 61关注 0票数 0

我目前正在研究一种方法来显示带有封面、标题和发行日期的缩略图的电影列表。对于短标题来说，整个过程都很好，但是如果涉及到更长的标题，整个事情就会变得一团糟。

你能告诉我如何使文本对齐的图像，我的结果如下所示的图片？

我感谢所有的小费。

代码(在“完整页面”-Mode中运行代码片段以获得最佳体验)

​

代码语言：javascript
运行
复制
header {
	background-color: grey;
	margin: 3px;
	padding-left: 7px;
}

header > h2 {
	display: inline-block;
}

#info {
	padding-left: 5px;
	margin: 1px;
	float: left;
	width: 69%;
}

#result {
	float: right;
	width: 29%;
	margin:1px;
}

.pillLink > h {
	display: inline-block;
}

.pillLink {
	display: inline-block;
	padding-left: 20px;
}

.pill > #cover {
	height: 100px;
	outline: 2px solid white;
}

.pill {
	
	padding: 7px;
	margin: 10px;
	background-color: silver;
	-webkit-border-radius: 7px!important;
	-moz-border-radius: 7px!important;
	border-radius: 7px!important;
	border: 1px solid grey
}
代码语言：javascript
运行
复制
<html>
	<head>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="pills_style.css">
	</head>
	
	<body>
	
	<div id="info">
	
	</div>
	
	<div id="result">
	<h2>similar results</h2>
		<div>
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Very Long Sample Text 4: A new Hope Extended Cut</h3></a>
				<span>(2014)</span>
			</div>
			
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Very Long Sample Text 7: The Force Awakens 3D</h3></a>
				<span>(2014)</span>
			</div>
			
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Short Sample Text 10: XXS</h3></a>
				<span>(2014)</span>
			</div>
		</div>
	</div>
	
	
	</body>
</html>

​

它应该是这样的：

​

html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-01-07 13:33:22

将下面的行添加到pillLink css类中，您就可以了。

代码语言：javascript
运行
复制
max-width: calc(100% - 75px);

编辑完整片段：

代码语言：javascript
运行
复制
<div class="pill">
                <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" class="cover">
    <span class="pill-content">
                <a href="http://www.imdb.com/title/tt0816692" class="pillLink">Very Long Sample Text 4: A new Hope Extended Cut<span class="date">(2014)</span></a>&nbsp;

    </span>
            </div>



.pill-content{
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 92px);
    margin-left: 20px;
}

.pillLink {
    display: inline-block;
    font-size:24px;
}
.date{
    font-size:14px;
    color: initial;
    margin-left: 8px;
}
.pill > .cover {
    outline: 2px solid #FFF;
    width: 68px;
    max-height: 100px;
}
票数 1
EN

Stack Overflow用户

发布于 2016-01-07 14:24:39

您也可以使用Bootstrap的默认组件媒体-对象，否则您必须稍微更改html和css。

​

代码语言：javascript
运行
复制
* {
  box-sizing: border-box;
  /* browser reset */
}
header {
  background-color: grey;
  margin: 3px;
  padding-left: 7px;
}
header > h2 {
  display: inline-block;
}
#result {
  float: left;
  width: 100%;
}
.pillLink > h {
  display: inline-block;
}
.pillLink {
  display: inline-block;
  padding-left: 10px;
}
.pill {
  padding: 7px;
  background-color: silver;
  -webkit-border-radius: 7px!important;
  -moz-border-radius: 7px!important;
  border-radius: 7px!important;
  border: 1px solid grey;
  margin-bottom: 20px;
  /* for giving some space at bottom */
  width: 100%;
  overflow: hidden;
  /* nothing goes outside */
}
.pill-img {
  width: 68px;
  /* some xyz width and height as you have given*/
  height: 100px;
  overflow: hidden;
  position: relative;
  z-index: 10;
  float: left;
  /* to make next div fall aside */
}
.pill-img img {
  max-width: 100%;
  height: auto;
}
.pill-text {
  margin-left: -68px;
  padding-left: 78px;
  position: relative;
  z-index: 5;
  width: 100%;
  float: left;
}
代码语言：javascript
运行
复制
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="pills_style.css">

<div id="result">
  <h2>similar results</h2>
  <div>
    <div class="pill">
      <div class="pill-img">
        <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg">
      </div>
      <div class="pill-text">
        <a href="http://www.imdb.com/title/tt0816692" class="pillLink">
          <h3>Very Long Sample Text 4: A new Hope Extended Cut</h3>
        </a>
        <span>(2014)</span>
      </div>
    </div>

    <div class="pill">
      <div class="pill-img">
        <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg">
      </div>
      <div class="pill-text">
        <a href="http://www.imdb.com/title/tt0816692" class="pillLink">
          <h3>Very Long Sample Text 7: The Force Awakens 3D</h3>
        </a>
        <span>(2014)</span>
      </div>
    </div>

    <div class="pill">
      <div class="pill-img">
        <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg">
      </div>
      <div class="pill-text">
        <a href="http://www.imdb.com/title/tt0816692" class="pillLink">
          <h3>Short Sample Text 10: XXS</h3>
        </a>
        <span>(2014)</span>
      </div>
    </div>
  </div>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2016-01-07 13:58:23

​

代码语言：javascript
运行
复制
header {
	background-color: grey;
	margin: 3px;
	padding-left: 7px;
}

header > h2 {
	display: inline-block;
}

#info {
	padding-left: 5px;
	margin: 1px;
	float: left;
	width: 69%;
}

#result {
	float: right;
	width: 29%;
	margin:1px;
}

.pillLink > h {
	display: inline-block;
}

.pillLink {
	display: inline-block;
	padding-left: 20px;
    max-width: calc(100% - 75px);
}

.pill > #cover {
	height: 100px;
	outline: 2px solid white;
}

.pill {
	
	padding: 7px;
	margin: 10px;
	background-color: silver;
	-webkit-border-radius: 7px!important;
	-moz-border-radius: 7px!important;
	border-radius: 7px!important;
	border: 1px solid grey
}
代码语言：javascript
运行
复制
<html>
	<head>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="pills_style.css">
	</head>
	
	<body>
	
	<div id="info">
	
	</div>
	
	<div id="result">
	<h2>similar results</h2>
		<div>
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Very Long Sample Text 4: A new Hope Extended Cut <span>(2014)</span></h3></a>
				
			</div>
			
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Very Long Sample Text 7: The Force Awakens 3D <span>(2014)</span></h3></a>
				
			</div>
			
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Short Sample Text 10: XXS <span>(2014)</span> </h3></a>
				
			</div>
		</div>
	</div>
	
	
	</body>
</html>

​

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

https://stackoverflow.com/questions/34656382

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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