2016-10-04 226 views
-1

我需要一個div,除了在它前面有一個Image時,它的父級的全部寬度。因爲那時我想要圖像在同一行上。我試圖將圖像浮動到左側,這使得div中的文字變成了我不想要的圖像。 下面是一些圖像,我希望將清理圖像:css動態div寬度

與圖像的事情:

The thing with the image

沒有圖像的東西:

The thing without the image

+0

如果您嘗試過的東西,那麼請共享代碼。 –

+0

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**](http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) ,無論是通過谷歌或通過搜索,做出嘗試和。如果您仍然遇到麻煩,請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

+0

對不起,我不知道分享我自己寫的代碼是必須的。我認爲這是沒有必要的,因爲我試過的東西似乎甚至接近我想要的。 – deathchaser

回答

0

你可以使用display:table(注意:這是而不是使用表格進行佈局)

.wrapper { 
 
    background: lightgray; 
 
    display: table; 
 
} 
 
.wrapper img ~ p { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
}
<div class="wrapper"> 
 
    <p> 
 
    First Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text 
 
    some Text some Text some Text some Text some Text 
 
    </p> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <img src="http://lorempixel.com/300/200" /> 
 
    <p> 
 
    First Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text 
 
    some Text some Text some Text some Text some Text 
 
    </p> 
 
</div>

+0

這似乎是它。非常感謝您的時間和精力。 – deathchaser

+0

如果這是值得的,你可以通過點擊答案左邊的勾號來接受它 – jbutler483