0

我想要实现的是连续三个具有不同、特定宽度和相等高度的 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;
}
4

4 回答 4

2

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

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

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

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

Firebug和 Firefox 或 Chrome/Safari 中的Element Inspector之类的工具确实有助于解决此类问题——您会立即看到您的规则甚至不适用于元素，然后这将是一个快速消除的过程一些错别字导致了这种情况。

于 2012-06-25T19:03:32.843 回答
1

尝试添加这个：

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

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

在您的情况下，它是幻灯片 1、幻灯片 2、...<div>


或第二种方法

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


注意：在jsfiddle 1、jsfiddle 2上工作的简化示例。

于 2012-06-25T17:49:20.743 回答
1

您是否尝试过在三个 div 上使用 display: inline-block，将它们中的每一个浮动到左侧并进行相对定位？

IE。

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

但是，看起来中间的“间距”div 是一个像素宽？如果是这种情况，你不能删除它并给第一个 div 一个border-right: 1px; 使用 css3 边框图像来放置您的间隔图像？

这看起来更干净，并且产生的开销更少。

于 2012-06-25T17:54:16.447 回答
1

也许你的 div 宽度太小了。尝试重置您的 css： http: //meyerweb.com/eric/tools/css/reset/ 。还可以尝试降低不工作的 div 的宽度，以便在您的幻灯片中未使用 10 px 的宽度空间。

于 2012-06-25T18:50:17.637 回答