jquery - 动态水平布局

标签 jquery html css layout

我在为我的新网站设置布局时遇到了一些问题 - 它无论如何都不起作用。希望有人能帮助我!

我的意图是让父元素 (#projects) 居中,其宽度由其所有子元素 (.project) 的总和计算得出。

HTML

<ul id="projects">
   <li class="project"></li>
   <li class="project"></li>
   <li class="project"></li>
   <li class="project"></li>
   <li class="project"></li>
   <li class="clear"></li>
</ul>

CSS

* {
        margin:0; padding:0; list-style:none;
        text-decoration:none; border:0; outline:0; }

body {
        background:#f5f5f3;
        font-family:"Arial", sans-serif;
        font-size:12px;
        line-height:22px;
        letter-spacing:1.5px;
        font-weight:300;
        color:#fefefe; }

.clear {
        clear:both; }

#projects {
        margin:auto; }

#projects .project {
        height:100vh;
        float:left; }

#projects .project:nth-child(1) {
        background:#111; }

#projects .project:nth-child(2) {
        background:#333; }

#projects .project:nth-child(3) {
        background:#555; }

#projects .project:nth-child(4) {
        background:#777; }

#projects .project:nth-child(5) {
        background:#999; }

jQuery

$(document).ready(function() {

    // .project Layout
    $(window).on( "resize", function () {
        $(".project").width( $(window).width() / 3 );
    }).resize();

    // #projects Layout
    $(window).on("resize", function () {
    var width = 0;
    $('.project').each(function() {
        width += $(this).outerWidth( true );
    });
    $('#projects').css('width', width);
    }).resize();

});

enter image description here

最佳答案

你可以这样做:

#project {
    width: 100%;
}

.project {
   width: 33%;
}

关于jquery - 动态水平布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25413921/

相关文章:

jquery - 基于jQuery的多文件 uploader

javascript - HTML li ul 下拉菜单层次结构

jquery - 我如何修改支持 Jalali 日历和达里月的 jquery datepicker?

javascript - 如何将鼠标事件添加到 div 集并从数据库表单单击 div 加载数据?

java - Jsoup Java 获取特定的td

javascript - 以编程方式禁用 Chrome 自动填充

javascript - 在 div 淡入后重置它以防止 'stacking'

javascript - 在 HORIZONTAL 滚动条上显示 SVG 动画

css - 登录页面不读取 java ee 应用程序中的 css

html - 100% 宽度标题固定两个 div