對齊兩個部分彼此相鄰的響應

我要對齊兩個部分彼此相鄰。一個有文本（標題），文本的長度會發生變化。一個部分有一個圖像。

我的問題是，當我讓屏幕尺寸變小時，第二部分就要下來了。

嘗試顯示：錶行;顯示：表;顯示：表細胞;沒什麼幫助。第二個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; 
}

來源

2014-05-17 Aasim Hussain Khan

迪你嘗試顯示：內聯塊和給予寬度：兩者都是49％？ –

我無法指定寬度，因爲標題文本每次都在變化。例如：何時有一個溢流警告
在 –

你可以指定寬度的百分比，這將解決它。 –

靜態文本：嘗試：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>

來源

2014-05-17 09:28:12

它不工作！標題文本每次都在變化。如果文本像「DURING」一樣小，則會留下太多灰色空間，並且如果文本長得像「如果有洪水警告」，文本就會出現兩行！請幫忙。需要在一個小時內完成！ –

動態文本的更新代碼。檢查它是否適合你。 –

嘿，感謝它幫助。但形象正在切入。該怎麼做？ –

對齊兩個部分彼此相鄰的響應

回答

相關問題