Question

http://www.walkerspencer.com/chrhsweb/max

所以我目前正在做一个高中项目，我完全被难过了。我的一篇文章，文章，并没有表现出我喜欢它的方式。它的高度为0.现在，经过大量的谷歌搜索和研究，似乎这是一个常见的问题......对于包含浮动元素的容器。我的文章中没有浮动div。我甚至尝试从我的#buttons div的css中删除float，它没有任何效果。我也尝试了大多数建议的浮动修复：clearfix方法，clear：both。在这一点上，我只需要一个外界的意见。我在代码中找不到任何重大错误（除了语义元素的一般混乱和误用）。预期的行为是部分缩放，同时在浏览器调整大小时保持16：9的比例，并且具有填充整篇文章的黑色透明背景。我也可以将背景应用于文章，但文章也没有高度。如果你只是想批评我糟糕的代码习惯和格式，那也没关系:)。图像的缺失不应该很重要，尽管它们的比例是16：9，而且在添加任何jquery之前我遇到了这个问题。非常感谢。很抱歉，如果我的帖子有问题，或者我是怎么问的话，这是我第一次在这里提问。

HTML：

<head>
    <meta charset='utf-8'/>
    <title>design</title>
    <link rel="stylesheet" type="text/css" href="reset.css"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>


    <script type="text/javascript">
    $(document).ready(function() {

        $("#images").cycle({
        containerResize: false,
        slideResize: false,
        fit: 1
        });

        $('article').cycle({ 

        activePagerClass: 'activeSlide',
        containerResize: false,
        slideResize: false,
        fit: 1,
        timeout: 0, 
        speed:   300, 
        startingSlide:0,
        pager: "#buttons",
        pagerAnchorBuilder: function(idx, slide) { 
        return '#buttons li:eq(' + idx + ')';}
        });


        $('#right').click(function() {
            $('article').cycle("next"); 
            return false; 
        }); 
        $('#left').click(function() { 
            $('article').cycle("prev"); 
            return false; 
        }); 
    });
    </script>
</head> 

<body>


    <div id="container">


            <div id="arrows">
                <div id="left">&#60;</div><div id="right">&#62;</div>
            </div>
            <nav>

                <ul id="buttons">
                    <li><a href="#"></a>
                    <li><a href="#"></a>
                    <li><a href="#"></a>
                    <li><a href="#"></a>
                    <li><a href="#"></a>
                </ul>

            </nav>
            <div class="fix"></div>
            <article>
                <section id="images">
                <img src="images/alaska.jpg" width="100%" height="auto"/>
                <img src="images/field.jpg" width="100%" height="auto"/>
                <img src="images/sunset.jpg" width="100%" height="auto"/>
                </section >
                <section id="about">
                <p>
                    my name is <span style="color:crimson">max</span>.<br>
                    i'm a senior in high school.<br>
                    i love <span style="color:yellow">code</span><br>
                    <span style="color:#a45bc4">&amp;</span><br>
                    i love <span style="color:lightgreen">design</span>.<br>
                    <span style="color:#a45bc4">welcome to my site.</span>
                </p>
                </section >
                <section id="work">

                </section >

                <section id="contact">

                </section>
                <section id="place">

                </section>

            </article>
            <div id="bottom"></div>
    </div>
</body>

CSS：

body{
    background-image:url("images/clouds.jpg");
    background-size:cover;
    background-color:white;
    background-repeat:no-repeat;
    height:100%

}

#container{
    width:70%;
    min-height:103px;
    margin:0 auto;
    min-width:182px;
}

#arrows{
    max-width: 140px;
    height: 70px;
    background: #f7f7f7;
    -moz-border-radius: 70px 70px 0 0;
    -webkit-border-radius: 70px 70px 0 0;
    border-radius: 70px 70px 0 0;
    margin:auto;
    position:relative;
    top:25px;
    z-index:100;
    border-top:1px solid;
    border-color:#cccccc;
    font-family:"Lato";
    text-align:center;
    vertical-align:middle;
    line-height:60px;
    font-size:68px;
    color:#cfcfcf;
    font-weight:100;
    font-stretch:ultra-condensed;

}

#right:hover, #left:hover{
    color:#a45bc4;
    text-decoration:none;
}
#right, #left{
    display:inline;
    color:#cfcfcf;
    text-decoration:none;
    cursor:pointer;
    -webkit-user-select: none;       
    -moz-user-select: none;
    -ms-user-select: none;

    -o-user-select: none;
    user-select: none;

}
nav{
    width:calc(100%-2px);
    border-left:1px solid #cfcfcf;
    border-right:1px solid #cfcfcf;
    height:35px;
    background-color:#f7f7f7;
    min-width:182px;


}
#buttons{
    position:relative;

    float:right;
    margin-right:6px;
    z-index:100;
}
.fix{
    clear:both;
}
.current{
    padding-right:0px;
}

#buttons li{

    display:inline-block;
    height:26px;
    width:26px;
    background-image:url("images/navc.jpg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:24px;
    margin-left:8px;
    margin-top:4px;
    vertical-align:middle;
    cursor:pointer;
}
#buttons li:hover{
    opacity:.8;

}
#buttons a{
    color:black;
    text-decoration:none;
}
#buttons li.activeSlide{
    background-image:url("images/violetc.jpg");
    height:26px;
    width:26px;
    background-size:26px;
    vertical-align:middle;
}


article{
    width:100%;
    min-width:184px;
    height:100%;

}


section{
    height:100%;
    width:100%;
    margin:0 auto;
    text-align:center;
    vertical-align:middle;
    color:white;
    font-weight:100;
    font-size:36px;
    font-family:"Lato";
    background-color:rgba(0,0,0,.4);
}
p{

}
#about{

}

.option img{
    opacity:.6
}


.option:hover{
    opacity:.8;

}
#bottom{
    border-left:1px solid #cfcfcf;
    border-right:1px solid #cfcfcf;
    border-bottom:1px solid #cfcfcf;
    height:30px;
    background-color:#f7f7f7;
    min-width:182px;
    margin-top:56.25%;


}


@media all and (max-width:690px){
    #buttons{
    margin-top:2px;
    width:98%;
    text-align:center;
    }
    nav{position:relative;
    text-align:center;}
}

Answer 1

如果你要保留幻灯片插件，那就是导致绝对定位的孩子的原因（你没有这样做），那么你唯一的选择是强制article元素的高度，如果你想把它用于某事。

您可以为其应用类/ ID（如果您使用的是与此样式无关的其他article元素，并且每页仅使用一次，则使用ID，或者如果你想在同一页面的其他地方重新使用它，请使用一个类。）所以你会有类似的东西：

article.slideshow-container { height: 498px; }

然后你可以随意使用它。这是一个固定的高度，所以如果图像高度发生变化，你就会再次失败。

Answer 2

问题肯定在于你的jQuery Cycle Plugin的实现。正如setek所提到的，幻灯片显示使你的section divs置于绝对位置，将article元素的高度折叠为0.你可以将以下内容添加到你的循环脚本中，以动态调整每个幻灯片/部分的高度：

    before : function(currSlideElement, nextSlideElement){
      $('article').css('height', $(nextSlideElement).height()+'px');
    },

你还应该清理你的代码（这有点乱）并尝试逐步采取措施。我在这里为你创建了一个工作示例：

http://jsfiddle.net/BCyD8/

您需要稍微努力才能获得正确的间距。

有0高度div的问题，但没有漂浮。我能做什么？

2 个答案: