Question

它应该很简单，但我是，所以它不是......

页面上的第一件事，就在<body>之后，我想要一种横幅，包含一些左对齐的文字和一个右对齐的图像。它应该占据页面的整个宽度。

你能不知道图像的宽度吗？

Answer 1

是的，将图像放在一个div中，将文本放在另一个div中，为带有图像的div定义“float：right”属性，为div中的“float：left”定义带有CSS的文本

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

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

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

Answer 2

<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（google it）技术来确保横幅div始终具有高度，无论图像有多大。

Answer 3

这是一个小提琴：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>

Answer 4

当然可以。但是你的图像必须足够小，以免你的文字溢出横幅。

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; }

如何在页面顶部浮动一些文本和图像？

4 个答案: