Как мне разместить текст и изображение в верхней части страницы?

#css

Вопрос:

Это должно быть очень просто, но я такой, так что это не так …

Первое, что появляется на странице, сразу после <body> , я хочу, чтобы на ней был своего рода баннер, содержащий некоторый текст, выровненный по левому краю, и изображение, выровненное по правому краю. Оно должно занимать всю ширину страницы.

Вы можете сделать это, не зная ширину изображения?

Ответ №1:

Да, поместите изображение в один div, а текст в другой, определите свойство «float: right» для div с изображением и «float: left» для div с текстом в CSS

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

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

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

Ответ №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 баннера всегда имеет высоту, независимо от размера изображения.

Ответ №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>

Ответ №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; }