2016-10-04 100 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