CSS漂浮右

Question

我想知道最好的方式让我的标题漂浮在右边，这样它的位置就在我的图像旁边。

我注意到，因为它包含在一个div里面，它占据了100％的宽度，当我将标题浮起来时，它会转到div的最右端点，而不是在我的图像旁边。

我可以绝对或相对定位我的形象，但不会影响流？例如，当屏幕变小时，我希望头部在图像下方浮动。

这可能吗？

<div id="holder"> 
<h1 id="header">My Header goes here</h1> 
<img id="feature" src="pic.jpg" alt="" /> 
</div> 

*风格

#header{float:right;} 

Answer 1

如果你需要你的容器是100％的宽度，你会需要另一个“内部”的容器，不是100％的宽度，并包含所有你想要的东西飘来向右：

<div id="holder"> 
    <div id="innerHolder"> 
     <h1 id="header">My Header goes here</h1> 
     <img id="feature" src="pic.jpg" alt="" /> 
    </div> 
</div> 

风格：

#holder{width:100%;} 
#innerHolder{float:right;} 

Answer 2

如果您希望它们在持有者div内彼此相邻，则需要浮动图像和标题。

Answer 3

另一种方式来做到这一点是这样的：

<div id="holder"> 
<img id="feature" src="pic.jpg" alt="" /> 
<h1 id="header">My Header goes here</h1> 
</div> 

和

#feature {float: left; width:100} 
#header { margin: 0px 0px 0px 110px;} 

这将浮动图像，并使用div的保证金，将其调整到图像的右侧。我只是提出了宽度和边距的值，但你应该明白这一点。如果你使用float：right，你的div最终会在浏览器窗口的右边，而这会让你把div放在你的图像的右边。