css - 需要并排放置 div，但 "float: left"不起作用

Question

我想要实现的是连续三个 div，它们具有不同的特定宽度和相同的高度。其中两个实际上有内容，中间一个只包含一个垂直间隔图像。这三个 div 与其他幻灯片一起包含在“幻灯片”div 中。这些幻灯片都在一个容器 div 中，并由 JavaScript 控制，一次只隐藏一张幻灯片。请注意，幻灯片不是问题，而是其内容的布局。目前，我只能将第二张幻灯片中的三个 div 堆叠在一起，但它在第一张幻灯片中使用四个 div 时效果非常好。这是我迄今为止尝试过但没有奏效的方法:

• float:left; 在每个 div 上
• float:left; 在前两个，然后是 float:right 在最后
• display:inline; 在每个 div 上
• display:inline-table;
• 降低宽度使它们不精确
• 删除所有边距
• clear:left; 在第三个 div 之后
• clear:both; 在第三个 div 之后
• 使用 class 而不是 id (实际上已经改变了一些东西)
• 上述的各种组合

我在 Mac OS X 上使用 Eclipse 编写代码和 Safari 进行测试；一切都是最新的。非常感谢任何帮助，因为我已经尝试让它工作两天半了。这是我的代码，如果您需要更多代码来查找问题，请告诉我。

HTML:

     <div id="container">
         <div class="slide1">

            <div id="news-content">
                <div id="news-img">
                    <img src="album_example.png" />
                </div>
                <div id="news-img-description">
                    <h2 align="left">Lorem Ipsum</h2>
                    <p align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat dictum pharetra. Cras porta.</p>
                </div>
                <div id="news-vr">
                    <img src="light_vr.png" />
                </div>
                <div id="news-feed">

                </div>
            </div>


        </div>


        <div class="slide2">
            <div id="music-content">
                <div id="music_albums">
                    <ul style="list-style-type: none;">
                        <li><img src="album_test.png" /></li>
                        <li><img src="album_test.png" /></li>
                        <li><img src="album_test.png" /></li>
                    </ul>
                </div>
                <div id="music_vr">
                    <img src="light_vr.png" />
                </div>
                <div id="music_remixes">
                </div>
            </div>
        </div>
        <div class="slide3">
        <h2>This is slide 3.</h2></div>
        <div class="slide4">
        <h2>This is slide 4.</h2></div>
    </div>

*album_example.png 为 300x300，album_test.png 为 100x100

CSS:

@CHARSET "UTF-8";

h2 {
    color: #AAAAAA;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 150%;
}

p {
    color: #AAAAAA;
    font-family: Arial, Helvetica, sans-serif;
}

#container {
    width: 900px;
    height: 500px;
}

.slide1, .slide2, .slide3, .slide4 {
    width: 900px;
    height: 500px;
}

#news-content {
    width: 900px;
    height: 500px;
    margin: 0;
    max-height: 500px;
}

#news-img {
    float: left;
    width: 300px;
    padding: 100px 0 0;
    max-height: 300px;
}

#news-img-description {
    float: left;
    width: 295px;
    padding: 160px 15px 0 15px;
    max-height: 340px;
}

#news-vr {
    float: left;
    width: 1px;
    padding: 0 2px;
    max-height: 500px;
}

#news-feed {
    float: right;
    width: 300px;
    max-height: 500px;
}

#music-content {
    width: 900;
    height: 500;
    margin: 0;
    max-height: 500px;
}

#music-albums {
    float: left;
    width: 447px;
    padding: 15px 0 0 0;
    max-height: 485px;
}

#music-vr {
    float: left;
    width: 1px;
    padding: 0 2px;
    display: inline-block;
    max-height: 500px;
}

#music-remixes {
    float: left;
    width: 448px;
    padding: 15px 0 0 0;
    display: inline-block;
    max-height: 485px;
}

#music-albums, #music-remixes ul
{
    margin: 0;
    padding: 0;
}

#music-albums, #music-remixes ul li
{
    margin: 0 0 1em;
    padding: 0;
    list-style-type: none;
}

Answer 1

好的。所以这次正确回答你的问题:

您混淆了下划线和破折号。 html 中的许多 ID 使用下划线，而相应的 CSS 使用破折号，例如 html 中的 music_vr 和 css 中的 music-vr。

这至少应该让事情开始变得有意义。

我做了一点 clean-up on jsfiddle这表明当您选择正确的元素时，您的 float 规则确实有效!

类似 Firebug 的工具和 Element Inspector在 Firefox 或 Chrome/Safari 中确实有助于解决这样的问题——您会立即发现您的规则甚至没有应用到元素上，然后通过快速排除过程找出是某些拼写错误导致的.