There is no reason this should be difficult to achieve. Back in the way day you could just create a table and put the image on the first cell and the text on the second. Easy as pie.
没有理由这很难实现。回到路上，您可以创建一个表格，将图像放在第一个单元格上，将文本放在第二个单元格上。易如反掌。
For some reason I am having a hell of a time getting this to work with css, and I know css pretty fluently. I'm sure I'm just overlooking a hopefully easy answer.
由于某种原因，我有一段时间让这个与CSS一起工作，我知道css非常流利。我敢肯定，我只是忽略了一个有希望的答案。
What I'm looking to achieve:
我想要实现的目标：
- Dynamic sized (being pulled from database) image floated to the left - Description text to the right with out wrapping below image when it reaches the image height.
- 动态大小（从数据库中拉出）图像浮动到左侧 - 说明文本向右，当图像达到图像高度时，在图像下方向外包装。
What won't work:
什么行不通：
- Setting a margin-left on the text (width of image is not consistent)
- 在文本上设置左边距（图像宽度不一致）
- Setting a width / floating right on text (again, image width is dynamic so proper width on text would be unknown)
- 在文本上设置宽度/浮动权限（同样，图像宽度是动态的，因此文本上的正确宽度将是未知的）
Example Code (pre css):
示例代码（pre css）：
<div class="demo">
<img src="dynamic_sized_image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Hopefully there is an answer!!
希望有答案！
Thank you!
谢谢！
3 个解决方案
#1
48
Here is solution for your issue ( p { overflow: hidden} )
这是您的问题的解决方案（p {overflow：hidden}）
http://jsfiddle.net/simoncereska/BnQRW/
http://jsfiddle.net/simoncereska/BnQRW/
#2
0
I don't think this is possible with pure css because you have an attribute that is dynamic.
我不认为纯css是可行的，因为你有一个动态的属性。
Use javascript to calculate the img width, then you can find out the width of the text (provided the #demo container is a fixed size). Set the widths via js and use this css: http://jsfiddle.net/GcV3S/
使用javascript计算img宽度，然后你可以找出文本的宽度（假设#demo容器是固定大小）。通过js设置宽度并使用此css：http：//jsfiddle.net/GcV3S/
#3
0
The easiest and best way is just to set a fixed image size. Just scale these, this will is most cases improve the layout and look and feel of your website. If you really need to have this without setting a fixed width for the text-block or image-block I don't really know an answer at this moment, sorry.
最简单和最好的方法是设置固定的图像大小。只需缩放这些，大多数情况下都会改善您网站的布局和外观。如果你真的需要这个没有为文本块或图像块设置一个固定的宽度我现在还不知道答案，对不起。
The only way I can think of right now is using javascript to alter the width of the text... None the less a interesting question.
我现在能想到的唯一方法是使用javascript来改变文本的宽度......这不是一个有趣的问题。
#1
48
Here is solution for your issue ( p { overflow: hidden} )
这是您的问题的解决方案（p {overflow：hidden}）
http://jsfiddle.net/simoncereska/BnQRW/
http://jsfiddle.net/simoncereska/BnQRW/
#2
0
I don't think this is possible with pure css because you have an attribute that is dynamic.
我不认为纯css是可行的，因为你有一个动态的属性。
Use javascript to calculate the img width, then you can find out the width of the text (provided the #demo container is a fixed size). Set the widths via js and use this css: http://jsfiddle.net/GcV3S/
使用javascript计算img宽度，然后你可以找出文本的宽度（假设#demo容器是固定大小）。通过js设置宽度并使用此css：http：//jsfiddle.net/GcV3S/
#3
0
The easiest and best way is just to set a fixed image size. Just scale these, this will is most cases improve the layout and look and feel of your website. If you really need to have this without setting a fixed width for the text-block or image-block I don't really know an answer at this moment, sorry.
最简单和最好的方法是设置固定的图像大小。只需缩放这些，大多数情况下都会改善您网站的布局和外观。如果你真的需要这个没有为文本块或图像块设置一个固定的宽度我现在还不知道答案，对不起。
The only way I can think of right now is using javascript to alter the width of the text... None the less a interesting question.
我现在能想到的唯一方法是使用javascript来改变文本的宽度......这不是一个有趣的问题。