CSS вертикальное выравнивание и плавающая проблема

Question

CSS вертикальное выравнивание и плавающая проблема

0

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

Вот как это должно выглядеть:

И вот код, который я написал до сих пор:

<html>
<head>
    <title></title>
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body
        {
            font-family: 'Source Sans Pro';
            font-weight: 300;
            margin-left: 25px;
            margin-right: 25px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        #header
        {
            height: 50px;
            width: 100%;
        }
        .block
        {
            background-color: #e5e5e5;
            display: inline-block;
            width: 275px;
            height: 35px;
        }
        .block-sideline
        {
            background-color: #999999;
            display: inline-block;
            margin-right: 5px;
            width: 5px;
            height: 35px;
        }
        .block-span
        {
            margin-left: 5px;
            margin-right: 5px;
        }
        .block-hours
        {
            color: #000000;
        }
        .block-status
        {
        }
        .block-notavailable .block-sideline
        {
        }
    </style>
</head>
<body>
    <div id="header">
        <img id="header-logo" src="header-logo.svg" height="50px" width="125px" />
    </div>
    <div id="content">
        <h2>Sunday, December 1, 2013</h2>
        <div class="block">
            <div class="block-sideline">
            </div>
            <span class="block-hours">6:00 AM &ndash; 7:00 AM</span>
            <span class="block-status">Not available</span>
        </div>
    </div>
</body>

Сейчас это похоже на IE:

Итак, теперь, когда я плаваю часы, а боковая линия остается с float: left; и право права с float: right; , это выглядит так:

Прямо сейчас поля и цвета не важны, но как я могу сосредоточить текст внутри div и позволить ему плавать одновременно? Кроме того, на скриншоте выше поля не отображаются с правой стороны. Почему это?

Phoenix Logan 02 дек. 2013, в 19:59

Источник

0

Самый простой способ - использовать line-height равную высоте .block - jsfiddle.net/d2epj - хотя, если высота является динамической или имеется более одной строки текста, она не будет работать.
Adrift 02 дек. 2013, в 18:45

Теги:

html

css

css3

css-float

vertical-alignment

1 ответ

Ещё вопросы

Самый простой способ - использовать line-height равную высоте .block - jsfiddle.net/d2epj - хотя, если высота является динамической или имеется более одной строки текста, она не будет работать.

Minifyre · Answer 1 · 2013-12-02T17-19-00.000Z

Вот CSS

.block-sideline
{
    background-color: #999999;
    display: inline-block;
    margin-right: 5px;
    width: 5px;
    height: 35px;
    float:left;
}
.block-hours
{
    float:left; 
    line-height:225%;
    color: #000000;
}

.block-status
{
    float:right;
    line-height:225%;
}

В основном добавить float и line-height.