Question

我正在创建一个网站，可以预订一小时的街区。我正试图让风格正确。

这应该是这样的：

enter image description here

这是我到目前为止编写的代码：

<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中的样子：

enter image description here

所以，现在，当我用float: left;和float: right;向左移动小时和副线时，它看起来像这样：

enter image description here

现在边距和颜色并不重要，但是如何将文本置于div内并允许它同时浮动？此外，在上面的屏幕截图中，边距未显示在右侧。这是为什么？

Answer 1

这是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%;
}

基本上添加浮点数和行高。

CSS垂直对齐和浮动问题

1 个答案: