如何浮動頁面頂部的一些文字和圖像？

頁上的第一件事，<body>之後，我想一種旗幟，含有一些文本這是左對齊，以及右對齊的圖像。它應占據頁面的整個寬度。

你能不能知道圖像的寬度？

2011-06-11 Mawg

是，把圖像中的一個格，並在另一個文本，定義「浮動：權利」屬性與圖像的DIV，和「浮動：左」的CSS的DIV與文本

<div class="div1"><img src=...></div> 
<div class="div2">text</div> 

<style type="text/css"> 
.div1 { 
    float: right; 
} 

.div2 { 
    float: left; 
} 
</style>

來源

2011-06-11 06:07:21

+1到每個人，回答誰回答第一個。謝謝，所有。 – Mawg 2011-06-11 06:26:25

<div id="banner"> 
<div style="float: left; width: 50%;"> 
left - just put your text here 
</div> 
<div style="float: right; width: 50%;"> 
right - just put your image here 
</div> 
</div>

您可能還想使用clearfix（谷歌）技術來確保橫幅div始終具有高度，無論圖像有多大。

來源

2011-06-11 06:07:38 dunos

+1給所有人，並且回答給先回答的人。謝謝，所有。 – Mawg 2011-06-11 06:26:39

這裏有一個小提琴：http://jsfiddle.net/KaHjd/1/

我假設你想要的圖像右對齊爲好。

#header { 
    overflow:auto; 
} 

#branding { 
    float: left; 
    padding: 10px; 
    background: #00AA00; 
} 

#logo { 
    float:right; 
    padding: 10px; 
    background: #aa0000; 
    overflow:auto; 
} 

#logo img { 
    float:right; 
} 

<div id='header'> 
    <div id='branding'> 
     some text 
    </div> 
    <div id='logo'> 
     <img src='http://placekitten.com/200/100'> 
    </div> 
</div>

來源

2011-06-11 06:11:57 JohnP

對每個人都+1，對於首先回答的人的答案。謝謝，所有。 – Mawg 2011-06-11 06:26:32

當然可以。但是您的圖片必須足夠小，以便文字不會溢出橫幅。

HTML

<div class="banner"> 
    <span>Text goes here</span> 
    <img src="" alt="" /> 
</div>

CSS

.banner { overflow: hidden; width: 100%; } 
.banner span { float: left; } 
.banner img { float: right; }

來源

2011-06-11 06:16:05 Webars

+1給所有人，並回答第一個回答的人。謝謝，所有。 – Mawg 2011-06-11 06:26:48

如何浮動頁面頂部的一些文字和圖像？

回答

相關問題