将我的图像和文本对齐在两列不起作用

Question

<img id="story_image" src="images/builder_story_side.png" alt="photo"/>

<div id="story_right">
<h2 class="story_header">fdgdfgdfgdfgdfgfdgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg</h2>
<p class="small_story">fdgdfgdfgdfgdfgfdgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg</p>
</div>



img#story_image{float:left;}

div#story_right{float:left;}

之前我已经完成了两个专栏，但由于某种原因，这次它没有用。我希望图像位于第一列，文本位于第二列。 Story_right最终位于图像下方，好像story_image是一个块。

Answer 1

要正确浮动元素，您需要在要浮动的元素上设置宽度。可以使用设置像素和动态百分比宽度。这给你带来问题的原因是因为div的默认宽度是100％，所以图像不能在它旁边浮动。

Answer 2

您可以设置宽度。

<强> CSS

#story_image{width: 50%;float:left;}
#story_right{width: 50%;float:left;}

示例

http://jsfiddle.net/loktar/nnU26/1/