Question

我想要实现的是连续三个div，具有不同的，特定的宽度和相等的高度。其中两个实际上有内容，而中间一个只包含垂直间隔图像。这三个div包含在“幻灯片”div中，以及其他幻灯片。幻灯片都在一个容器div中，并用JavaScript控制，一次只能隐藏一张幻灯片。请注意，幻灯片不是问题，而是内容的布局。目前，我只能将第二个幻灯片堆栈中的三个div放在彼此的顶部，但是在第一个幻灯片中使用四个div完全正常。这是我到目前为止尝试过的，但没有奏效：

float:left;
float:left;，最后一个<{1}}
float:right
display:inline;
降低宽度以使它们不准确
删除所有边距
display:inline-table;在第三个div之后
clear:left;在第三个div之后
使用clear:both;代替class（实际上已更改了内容）
以上

我正在使用Eclipse代码和Mac OS X上的Safari进行测试;一切都是最新的。非常感谢任何帮助，因为我一直试图让它工作两天半。这是我的代码，如果你需要更多的代码来解决问题，请告诉我。

HTML：

id

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

CSS：

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

Answer 1

确定。所以这次正确回答你的问题：

你有混合的下划线和破折号。 html中的许多ID使用下划线来强调相应CSS使用短划线的位置，例如html中的music_vr和css中的music-vr。

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

当你选择正确的元素时，我做了一些clean-up on jsfiddle，表明你的浮动规则确实有效！

像Firebug这样的工具和Firefox或Chrome / Safari中的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

您是否尝试过在三个div上使用显示：inline-block，将它们中的每一个以相对位置浮动到左侧？

即

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

然而，看起来中间'间距'div是一个像素宽？如果是这种情况你不能删除它并给第一个div一个border-right：1px;使用css3 border-image放置间隔图像？

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

Answer 4

也许你的div太宽了。尝试重置您的CSS：http://meyerweb.com/eric/tools/css/reset/。还要尝试降低不工作div的宽度，以便在滑动时不使用宽度为10像素的空间。

需要div并排，但“float：left”不起作用

4 个答案: