將縮略圖對齊文字（2行）

我目前正在研究一種方法來顯示電影列表，包括封面縮略圖，標題和發佈日期。整個事情對於短小的標題來說工作得很好，但如果涉及更長的標題，整個事情會變得混亂。將縮略圖對齊文字（2行）

你能告訴我如何將文本與圖像對齊，結果如下圖所示：

我很感謝各種提示。

代碼（在「整版」 - 模式運行段的最佳體驗）

header { 
 
\t background-color: grey; 
 
\t margin: 3px; 
 
\t padding-left: 7px; 
 
} 
 

 
header > h2 { 
 
\t display: inline-block; 
 
} 
 

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

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

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

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

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

 
.pill { 
 
\t 
 
\t padding: 7px; 
 
\t margin: 10px; 
 
\t background-color: silver; 
 
\t -webkit-border-radius: 7px!important; 
 
\t -moz-border-radius: 7px!important; 
 
\t border-radius: 7px!important; 
 
\t border: 1px solid grey 
 
}

<html> 
 
\t <head> 
 
\t \t <!-- Latest compiled and minified CSS --> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
\t \t <link rel="stylesheet" type="text/css" href="pills_style.css"> 
 
\t </head> 
 
\t 
 
\t <body> 
 
\t 
 
\t <div id="info"> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div id="result"> 
 
\t <h2>similar results</h2> 
 
\t \t <div> 
 
\t \t \t <div class="pill"> 
 
\t \t \t \t <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover"> 
 
\t \t \t \t <a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Very Long Sample Text 4: A new Hope Extended Cut</h3></a> 
 
\t \t \t \t <span>(2014)</span> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="pill"> 
 
\t \t \t \t <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover"> 
 
\t \t \t \t <a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Very Long Sample Text 7: The Force Awakens 3D</h3></a> 
 
\t \t \t \t <span>(2014)</span> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="pill"> 
 
\t \t \t \t <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover"> 
 
\t \t \t \t <a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Short Sample Text 10: XXS</h3></a> 
 
\t \t \t \t <span>(2014)</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
\t 
 
\t </body> 
 
</html>

這是應該的樣子：

來源

2016-01-07 JohnDizzle

不應該在你的CSS的'.pillLink> h'是'.pillLink> h3'？ – xkcd149

@ xkcd149謝謝，我會修復它。 – JohnDizzle

以下行添加到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; 
}

來源

2016-01-07 13:33:22

它對標題正常工作，但日期仍在縮略圖下。 – JohnDizzle

那是因爲它不在痰盂容器....如果你抱着生病寫一個完整的片段 –

@JohnDizzle我更新了片段 –

-1

header { 
 
\t background-color: grey; 
 
\t margin: 3px; 
 
\t padding-left: 7px; 
 
} 
 

 
header > h2 { 
 
\t display: inline-block; 
 
} 
 

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

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

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

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

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

 
.pill { 
 
\t 
 
\t padding: 7px; 
 
\t margin: 10px; 
 
\t background-color: silver; 
 
\t -webkit-border-radius: 7px!important; 
 
\t -moz-border-radius: 7px!important; 
 
\t border-radius: 7px!important; 
 
\t border: 1px solid grey 
 
}

<html> 
 
\t <head> 
 
\t \t <!-- Latest compiled and minified CSS --> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
\t \t <link rel="stylesheet" type="text/css" href="pills_style.css"> 
 
\t </head> 
 
\t 
 
\t <body> 
 
\t 
 
\t <div id="info"> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div id="result"> 
 
\t <h2>similar results</h2> 
 
\t \t <div> 
 
\t \t \t <div class="pill"> 
 
\t \t \t \t <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover"> 
 
\t \t \t \t <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> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="pill"> 
 
\t \t \t \t <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover"> 
 
\t \t \t \t <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> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="pill"> 
 
\t \t \t \t <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover"> 
 
\t \t \t \t <a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Short Sample Text 10: XXS <span>(2014)</span> </h3></a> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
\t 
 
\t </body> 
 
</html>

來源

2016-01-07 13:58:23

你也可以使用Bootstrap的默認組件media-objects或者你w生病必須改變你的HTML和CSS一點點。

* { 
 
    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; 
 
}

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

來源

2016-01-07 14:24:39

將縮略圖對齊文字（2行）

回答

相關問題