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.

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

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

1 个答案: