CSS垂直对齐和浮动问题

Question

I'm creating a website which enables reservation of hour-long blocks. 我正在创建一个网站，该网站可以预订一个小时的时间段。 I'm trying to get the style right. 我正在尝试使样式正确。

This is what it should look like: 它应该是这样的：

在此处输入图片说明

And here is the code I've written so far: 这是我到目前为止编写的代码：

<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>

Right now, this is what it looks like in IE: 现在，这就是IE中的样子：

在此处输入图片说明

So, now, when I float the hours and the sideline left with float: left; 所以，现在，当我浮动小时数时，边线与float: left; and the status right with float: right; 状态为float: right; , it looks like this: ，它看起来像这样：

在此处输入图片说明

Right now the margins and colors are not important, but how can I center the text inside the div and allow it to float at the same time? 现在的边距和颜色并不重要，但是如何在div内居中放置文本并使其同时浮动呢？ Also, in the screenshot above, the margins are not showing on the right side. 另外，在上面的屏幕截图中，右边距未显示边距。 Why is this? 为什么是这样？

Answer 1

Here is the CSS 这是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%;
}

Basically add floats and line-height. 基本上添加浮点数和行高。

CSS垂直对齐和浮动问题

问题描述

1 个解决方案

解决方案1
0 2013-12-02 18:43:35

CSS垂直对齐和浮动问题

问题描述

1 个解决方案

解决方案1 0 2013-12-02 18:43:35

解决方案1
0 2013-12-02 18:43:35