CSS Div с сопровождающими пролетами - PullRequest
Новая
       9

CSS Div с сопровождающими пролетами

2 голосов
/ 09 марта 2011

Я пытаюсь создать простой заголовок из трех столбцов, но что-то работает не совсем правильно.

HTML (игнорировать ужасное несоответствие W3C): 

<html>
<body>
<div id="header">
    <span id="left">Page Title</span>
    <div id="center">Logged in as</div>
    <span id="right"><a href="logout.php">Logout</a></span>
</div>
</body>
</html>

CSS: 

#header {
padding: 6px;
background-color: #BBB;
}

#left {
float: left;
}

#center {
text-align: center;
}

#right {
float: right;
}

Это почти работает, за исключением того, что #right опускает строку и ломает всю вещь. Я не уверен, как это исправить, и я не сделал много разметки с плавающей, так что терпите меня.

Есть мысли?

Ответы [ 5 ]

3 голосов
/ 09 марта 2011

Переместить порядок элементов.Плавающий правый SPAN сверху центра DIV

Пример: http://jsfiddle.net/htxFJ/

2 голосов
/ 09 марта 2011

Если вы понимаете блочную модель, вы знаете, что это ожидаемое поведение элемента с display: block -> по умолчанию для div.

элементов с display: block (блочные элементы)вести себя как прямоугольный блок на странице и расширяться по горизонтали, занимая все доступное пространство.Следовательно, они смещают все последующие элементы к следующему доступному пространству под ними.

То же самое не верно с span, для которого display: inline установлено по умолчанию.Встроенные элементы не ведут себя как «прямоугольники» - они текут как текст.

Таким образом, в вашей ситуации у вас есть несколько вариантов: например, установить ширину центра div на фиксированное значение или напроцент.Но это не правильный способ исправить дизайн.Взгляните на несколько три столбца макетов и изучите их HTML и CSS.

Cheers!

0 голосов
/ 09 марта 2011 
<html><style>UR CSS</style><body><div id="header">

<span id="left">Page Title</span>
<div id="center">Logged in as
<span id="right"><a href="logout.php">Logout</a></span>
</div>

0 голосов
/ 09 марта 2011

Это потому, что интервал #center не является плавающим.скажи это следующим образом: 

#center {
    text-align: center;
    float: left;
    }
0 голосов
/ 09 марта 2011

Попробуйте переместить ваш «правильный» div, чтобы он был определен первым: 

<div id="header">
    <span id="right"><a href="logout.php">Logout</a></span>
    <span id="left">Page Title</span>
    <div id="center">Logged in as</div>
</div>
...