HTML и CSS форматирование

Question

Я новичок в веб-разработке, и у меня возникли проблемы с правильным форматированием элементов на странице.Веб-сайт разрабатывается с использованием html5 / css3, и я пытаюсь получить оправдание «Добро пожаловать» слева, поле с изображением справа, а затем текст «Моя учетная запись / Обновление» справа от этого.Пожалуйста, смотрите рисунок.

Все, что я до сих пор пробовал, приводило либо к выравниванию влево, либо к появлению элементов в отдельных строках.

Ваша помощь приветствуется.

Спасибо Крис

Answer 1

Это должно помочь вам начать:

http://jsfiddle.net/Eric/u5xvt/

---

HTML

<div class="controls">
    <img src="http://placehold.it/100x100" />
    <span>My Account</span>
    <a>Update</a>
</div>
<p>Welcome,<br /> Chris</p>

CSS

.controls {
    float: right; /* push it to the right */
    width: 200px;
    background: #FFe0c0; /* Just so you can see what is going on */
    padding: 5px;
}
.controls img {
    float: left; /* push it to the left */
    margin-right: 5px;  
}
.controls span, .controls a{
    display: block;
    line-height: 50px;
}

Answer 2

CSS способ сделать это с помощью атрибута float.

<div class="Header">
    <div class="Welcome"></div>
    <div class="Image"></div>
    <div class="MyAccount"></div>
    <div class="clear"></div>
</div>
<div class="Body">
    ...
</div>
...

И CSS для этого:

.Welcome { float: left }
.Image { float: right }
.MyAccount { float: right }
.clear { clear: both }

Цель clear:both состоит в том, чтобысделайте так, чтобы заголовок расширялся вокруг его содержимого - в противном случае Welcome, Image и MyAccount действительно появятся поверх всего, что есть в Body.

Ознакомьтесь с этим замечательным учебником: http://css.maxdesign.com.au/floatutorial/

Answer 3

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

Answer 4

Не видя примеров кода, я могу только попытаться помочь. Я бы предложил обернуть все ваши элементы в что-то вроде тега header, а затем сделать text-align:left;. Тогда, теоретически, но если всплыть img вправо, все должно появиться в одной строке. Как только код будет опубликован, я могу проверить его дальше.

Answer 5

Вы можете попытаться установить float: left, чтобы получить столбец как макет. В CSS3 возможно http://intensivstation.ch/files/css3/columns.html вам тоже поможет