将文本（2行）与缩略图对齐

时间：2016-01-07 13:29:39

标签： html css

我目前正在开发一种方法来显示带有封面缩略图，标题和发布日期的电影列表。整个事情适用于短标题，但如果涉及更长的标题，整个事情就搞砸了。

您能告诉我如何将文字与图片对齐，我的结果如下图所示吗？

我很感谢所有的提示。

代码（在“整页”中运行代码段“ - 获得最佳体验的模式）

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
}
<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>

这应该是这样的： This is what it should look like

3 个答案:

答案 0 :(得分：1)

将以下行添加到pillLink css类中，你会没事的

max-width: calc(100% - 75px);

[编辑] 完整片段：

<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 :(得分：1)

你也可以使用Bootstrap的默认组件media-objects，或者你必须稍微更改你的html和css。

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-1)

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
}
<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>

相关问题
最新问题