对齐我的图像和文本在两列不工作

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_image是一个块，Story_right会在图像下方结束。

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/