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

Question

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

我的问题是当我缩小屏幕尺寸时，第二部分正在下降。

尝试显示：table-row;显示：表格；显示：表格单元格；没有任何帮助。第二个 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>