Question

我想知道让我的标题向右浮动的最佳方法，使其位于我的图像旁边。

我注意到，因为它包含在一个100％宽度的div中，当我向右移动标题时，它会转到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

如果你想让它们在持有者div中彼此相邻，你需要浮动图像和标题。

Answer 2

如果您需要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 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放置在图像的“右侧”。

CSS浮动正确

3 个答案: