在响应中将两个部分彼此相邻对齐

Question

我希望将2个部分彼此相邻。一个有文本（标题），文本的长度会发生变化。还有一个部分有一个图像。

我的问题是，当我将屏幕尺寸缩小时，第二部分就会缩小。

尝试显示：表格行;显示：表;显示：表细胞;无济于事。第二个div仍然下降。

请帮助。

- 提前谢谢。

这是我的代码： HTML

<h2><span>BE PREPARED  PREPARED</span><img src="http://localhost/safesteps/wp-content/uploads/2014/04/before_bg_r.png" alt="before_bg_r"/></h2>

CSS

.inner_berfore h2{
    display:table-row;
    border-top: 4px solid #767676;
    position: relative; 
    float:left;
    width:98%;
}
.inner_berfore h2 span{
    background:#767676;
    display:table-cell;
    font-family: 'arial-black';
    text-transform:uppercase;
    padding-left:16px;
    font-size:22px;
    line-height:40px;
    color:#FFF; 
    float:left;
}
.inner_berfore h2 img{
    display:table-cell;
    float:left;
    height:40px;
}

Answer 1

对于静态文本： 尝试：http://jsfiddle.net/lotusgodkk/anK6u/6/

div{display:inline-block;width:49%;vertical-align:top;}
div img{max-width:100%}

HTML：

<div>Text</div>
<div><img src="src" /></div>

您可以根据您的设计指定不同的宽度

对于动态文字：

http://jsfiddle.net/lotusgodkk/anK6u/8/

CSS：

.table{display:table;}
.table div{display:table-cell;vertical-align:top;}
.table div img{max-width:100%}

HTML：

<div class="table">
        <div>Hellodfgsdfgsdfghsdfhsdfhdsfhdfhdsfhsdfhsdh</div>
        <div>
            <img src="http://asia.olympus-imaging.com/products/dslr/e520/sample/images/sample_03.jpg" />
        </div>
    </div>