创建一个文本和图像分开的 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.

这两个元素在某些情况下变成break appart的问题应该已经解决了，如果您希望文本在div中具有不同的位置，您可以将vertical-align:middle更改为top或bottom。希望这会有所帮助！