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

Вам понадобится разместить как изображение, так и заголовок, если вы хотите, чтобы они располагались рядом друг с другом внутри разделителя.

Answer 2

Еще один способ сделать это - это:

<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 "справа" от вашего изображения.

Answer 3

Если вы хотите, чтобы ваш контейнер имел ширину 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;}