Расположение CSS - вершина и право

Question

Расположение CSS - вершина и право

Я создаю отделение, которое должно иметь близкую кнопку в правом верхнем углу точно так же, как в изображении отображают http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg

Первое изображение было сделано в фотошопе. Я пытаюсь сделать то же, но с CSS. "Fechar" является близкой кнопкой (на португальском языке). Что лучший путь состоит в том, чтобы правильно расположить его без обходных решений с чистым CSS и веб-стандартами?

Вот мой код: http://jsfiddle.net/wZJnd/

Это - насколько я мог достигнуть.

16

css layout

задан Rodrigo Souza 2 August 2010 в 16:51

3 ответа

Вы можете сделать :

img.close {
float:right;
margin:25px 25px 0 0;
}

1

ответ дан 30 November 2019 в 22:23

Я бы работал с оболочками div вокруг img

. Таким образом, у вас был бы div для заголовка «div.header», который содержал бы эти div:

div.logo: логотип слева, содержащий тег img;
div.title: заголовок страницы;
div.close: кнопка закрытия, которая будет содержать ваш тег img.

Мне больше нравится использовать padding, чем атрибут margin. Я думаю, это лучше работает для целей совместимости.

0

ответ дан 30 November 2019 в 22:23

Другие вопросы по тегам:

css layout

Похожие вопросы:

score 18 · Accepted Answer

Я бы использовал абсолютное позиционирование внутри относительно позиционированного #header:

HTML

<div id="header"> 
  <h1>Your Title</h1>
  <a href="" class="close">Close</a>
</div>

CSS

#header {
    width: 700px;
    height: 200px;
    position: relative;

    text-align: center;

    background: #000 url(the-logo.png) no-repeat 30px 10px;
}

#header .close {
    position: absolute;
    top: 20px;
    right: 20px;
}

Это приведет к тому, что ссылка a.close будет использовать #header в качестве системы координат и расположите его на расстоянии 20 пикселей от верхнего и правого края.

По моему опыту, padding, margins и float более чувствительны к несогласованности рендеринга и изменениям размера шрифта, чем позиционирование. В результате я по возможности использую позицию.