并排需要div，但是“ float：left”无效

Question

我想要实现的是连续三个div，它们具有不同的特定宽度和相同的高度。 其中两个实际上有内容，中间一个仅包含垂直间隔图像。 这三个div与其他幻灯片一起包含在“幻灯片” div中。 这些幻灯片全部放在一个容器div中，并由JavaScript控制，一次只能隐藏一张幻灯片。 请注意，幻灯片不是问题，而是内容的布局。 目前，我只能使第二张幻灯片堆栈中的三个div彼此叠放，但是在第一张幻灯片中的四个div上它可以很好地工作 。 到目前为止，这是我尝试过但仍未奏效的内容：

• float:left; 在每个div上
• float:left; 在前两个然后float:right在最后一个float:right
• display:inline; 在每个div上
• display:inline-table;
• 降低宽度，因此它们不精确
• 删除所有边距
• clear:left; 第三格之后
• clear:both; 第三格之后
• 使用class而不是id （实际上已经改变了事情）
• 以上各种组合

我正在使用Eclipse进行代码测试，并在Mac OS X上使用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 。

至少应该使事情开始有意义。

我对jsfiddle进行了一些清理 ，表明当您选择正确的元素时，您的float规则实际上是有效的！

Firebug和Firefox或Chrome / Safari中的Firebug和Element Inspector之类的工具确实可以帮助解决此类问题-您会立即看到您的规则甚至没有应用于元素，这将是一个快速的消除过程导致某些错别字的原因。

Answer 2

尝试添加以下内容：

.slide1, .slide2, .slide3, .slide4 {
   float: left;
   margin-left: 20px;
   background-color: #eeeeee;
}

您需要添加包装内容的float属性<div> 。

您的情况是slide1，slide2，... <div>

还是第二种方法

.slide1, .slide2, .slide3, .slide4 {
   margin-left: 10px;
   display: inline-block;
   background-color: #cccccc;
}

注意：关于jsfiddle 1和jsfiddle 2的简化示例。

Answer 3

您是否尝试过使用display：inline-block在三个div上，以相对位置将它们向左浮动？

即。

.all3divs {
position: relative;
float: left;
display: inline-block;
}

但是，看起来中间的“间距” div是单个像素宽吗？ 如果是这种情况，则无法将其删除并为第一个div设置右边框：1px; 使用css3边框图像放置间隔图像？

这看起来更干净，而且开销更少。

Answer 4

也许您的div宽度太小。 尝试重置您的CSS： http : //meyerweb.com/eric/tools/css/reset/ 。 另外，请尝试降低无法正常使用的div的宽度，以便在幻灯片中不使用10 px的宽度。