Question

我无法在数小时后修复this problem - 当页面通过jquery.load加载时，文本框会下降，当我使用jquery.animate制作时，文本框会移到图片旁边的左侧从左到右的滑动效果。文本灰色框不应该掉落，因为我已将其设置为在CSS中向左浮动。

这是jquery，

$('.block-item').click(function(){

         $('#container-article').remove();

        // Create a div after the parent clicked element.
        $(this).after('<div id="container-article"></div>');

        // Set the div to a variable and set its css.
        var container_article = $('#container-article').css({
            float:'left',
            width:0
            });

        // Load the article into container_article.
        container_article.load('article-3.php', function(){
            $(this).animate({
                width:800
            },500);
        });

        return false;
    });

css，

.block-item {
    width:50px;
    height:500px;
    display:block;
    float:left;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #000;
    }

#article-content {
    width:500px;
    height:500px;
    background:#ccc;
    overflow:hidden;
    }

#image-content {
    float:left;
    }

html，

<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>
<div class="block-item"></div>

加载的页面，

<!-- binder-article -->
<div id="binder-article">

<div id="image-content"><img src="pic-2.jpg"/></div>

<!-- article-right -->
<div id="article-content">

    <p>In Kaduna in Nigeria, a hotbed of Christian-Muslim conflict, Imam Ashafa and Pastor James led warring militias against each other. In pitched battles, Imam Ashafa's cousing was killed and Pastor James' hand was cut off. Ready to kill each other, they were suddenly overwhelmed by the power of their faith. Now best friends, they lead interfaith efforts in Nigeria and across the world. This film shares their amazing story...</p>
    <p>In Kaduna in Nigeria, a hotbed of Christian-Muslim conflict, Imam Ashafa and Pastor James led warring militias against each other. In pitched battles, Imam Ashafa's cousing was killed and Pastor James' hand was cut off. Ready to kill each other, they were suddenly overwhelmed by the power of their faith. Now best friends, they lead interfaith efforts in Nigeria and across the world. This film shares their amazing story...</p>

</div>
<!-- article-right -->

</div>

我该如何解决？

或者animate以外的任何其他更好的jquery函数？

感谢。

Answer 1

您需要将您的块项目放在父容器中，并设置该父容器的宽度......如下所示：

<div id="parent_container">
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
</div>

和一些css

#parent_container {
 width:1165px;
}

如果块项目的数量是动态的，您可以随时在文档就绪时使用jQuery计算它们，并将它们的数量乘以50px（或其宽度），并添加容器的宽度 - 文章800px（或无论宽度是多少），然后将父容器宽度设置为。

Answer 2

啊 - 好的 - 我看到你的问题了...... 而不是浮动您的粘合剂艺术的内容，尝试将它们设置为内联块与nowrap在父...

因此，您提供的CSS应该替换为以下内容（这应该可以解决）：

.block-item {
    width:50px;
    height:500px;
    display:block;
    float:left;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #000;
    }

#article-content {
    width:500px;
    height:500px;
    background:#ccc;
    overflow:hidden;
    }

#image-content {
    }

#parent_container {
    width:1165px;
   }

#binder-article > #image-content,
#binder-article > #article-content {
    display:inline-block;
    vertical-align:top;
    }

#binder-article {
    white-space:nowrap;
    }

（这种情况适用于这种情况，因为'#binder-article'内部的元素都是div，而不是内容可能不在任何容器中的不同场景）

jquery：加载和动画页面时的布局问题

2 个答案: