创建一个div与文本和图像分开？

Question

我目前正在编写我的第一个网站，我有一个元素是“故事块”，它是一个固定的宽度和分割的图像和文本，但都在一个div中。以下图片仅供参考：http://i.imgur.com/FAbi4xF.jpg?1。

让我来解释一下这里展示的不同部分：一张带有轻微黑色覆盖的图像，以及左侧的文字，然后是描述右侧文字的文字。目前，我创建这个元素的效率很低，涉及到两个独立的div和不同的标题。下面是HTML：

<div class="story-image"> 
    <h2 class="story-head">STORY TITLE</h2> 
    <img src="http://gearpatrol.com/wp-content/uploads/2012/06/microsoft-surface-gear-patrol1.jpg"/> 
</div> 
<!--this ends the image and title part, begins the text part--> 
<div class="story-text"> 
    <h5>Story description.</h5> 
</div> 

而CSS：

.story-image { 
    position: inherit; 
    background-color: rgba(0,0,0,.39); 
    margin-left: 58px; 
    margin-bottom: 4px; 
    float: left; 
    overflow: hidden; 
    width: 220px; 
    height: 100px;} 
.story-head { 
    position: absolute; 
    text-align: center; 
    vertical-align: middle; 
    color: white; 
    font-weight: 800; 
    width:220px; 
    line-height:100px;} 
.story-text { 
    background-color: white; 
    width: 200px; 
    line-height: 100px; 
    height:100px; 
    float: left;} 
.story-text h5 { 
    padding-left:8px; 
    padding-top: 20px; 
    vertical-align: middle; } 

正如你可以看到，这是不是做这种事情的最有效的方式，并可能导致的问题，其中两个元素脱离彼此（例如：http://i.imgur.com/eBF8Rwa.png）。我无法想出一种方法来让图像和文字之间有一个单独的div。有谁知道可能的方法来做到这一点？谢谢你，节日快乐！

Answer 1

试试这个：

CSS

.container { 
    width:400px; 
    display:inline-block; 
    height:80px; 
    margin-right:10px; 
    padding:0; 
} 


.left { 
    display:table-cell; 
    vertical-align:middle; 
    width:120px; 
    margin:0; 
    padding:0; 
    height:80px; 
    background-image:url(URL); 
    background-size:100%; 
} 

.right { 
    display:table-cell; 
    vertical-align:middle; 
    width:280px; 
    padding:0 10px; 
} 

HTML

<div class="container"> 
    <div class="left">tjen<br>a</div> 
    <div class="right">tjen<br>a</div> 
</div> 

JSFiddle demo.

与两个eleme问题在某些情况下nts变成appart的情况应该消失，并且如果您希望文本在div中具有不同的位置，则可以将vertical-align:middle更改为top或bottom。希望这可以帮助！