html - 尝试在无序列表中 float div

Question

我是一名崭露头 Angular 的网页设计师，并不总是为将我的设计实现为代码而苦苦挣扎，但今天，当我在网站上工作时，我遇到了一个问题。我试图在 <li> 列表元素中嵌套两个 div。我想要一个跨越 <li> 元素和 float: left; 的全高，而另一个 div 包含两行文本，我希望它跨越 float: right; 。我认为我想做的事情相当简单，但出于某种原因，我真的很难让它正常工作。我基本上只是制作一个日历事件列表，最终我将使用 PHP 从 Google 日历中提取数据并重新填充您在下面看到的示例信息。

我试图让列表看起来像这样:

请记住，为了让代码正常工作，我暂时在 CSS 中用 Arial Black 和 Arial 替换了我的 Google Webfont。 Arial Black 应该用于 .day 类字体，Arial 应该用于 .info 类字体(也就是时间和地点线)。

如有任何帮助，我们将不胜感激!谢谢!!

HTML:

<ul class="gcal">
    <li>
        <div class="gcal-event">
            <div class="day">
                6.07
            </div>
            <div class="info">
                <span class="time">8pm-10:30pm</span><br />
                    456 Fake Ln. Blvd., New York, NY
            </div>
        </div>
    </li>
    <li>
        <div class="gcal-event">
            <div class="day">
                7.12
            </div>
            <div class="info">
                <span class="time">6pm-7pm</span><br />
                    123 Fake Ln., Chicago, IL
            </div>
        </div>
    </li>
</ul>

CSS:

ul.gcal {
    list-style: none;
    padding: 0 0 0 15px;
}

ul.gcal li {
    padding: 0 0 0 50px;
    display: block;
}

.gcal-event {
}

.day {
    float: left;
    width: 150px;
    text-align: right;
    padding: 7px 0 0 0;
    font-family: 'Arial Black', sans-serif;
    font-size: 48px;
    line-height: 0.6em;
}

.info {
    float: right;
    width: 640px;
    text-align: left;
    padding: 0 0 0 10px;
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    line-height: 1em;
}

.info span.time {
    font-weight: bold;
}

Answer 1

这是因为 li 正在失去它们的高度。 float 的 child 不会增加 parent 的高度。将 overflow: hidden 添加到 li 以解决此问题。

ul.gcal li {
    padding: 0 0 0 50px;
    display: block;
    overflow: hidden;
}

Fiddle