javascript - 文章比父 div 宽

Question

当我的屏幕浏览器窗口在 992px-1199px 之间时，我的文章元素比它们的父 div (.wrapper) 更宽。所以在这个屏幕宽度下，面板重叠并且看起来不对。

在所有其他屏幕宽度下，我的代码都准确显示了它应该如何显示。

我怎样才能使这些 .wrapper div 始终至少与其子 article 元素一样宽？

标记:

<div class="container">
<div id="datalist">
<div class="row">
</div>
</div>
</div>
<script src="js/jQuery/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $.getJSON("articles.json", function(result){
        $.each(result, function(i, field){
            jQuery('<div/>', {
                id: 'div'+i,
                class: 'wrapper col-md-3 col-sm-6 col-xs-12',
            }).appendTo('.row')
            jQuery('<article/>', {
                id: 'article'+i,
                title: field.title,
                style: 'background-image: url('+field.thumbnail.url+');',
                height: field.thumbnail.height,
                width: field.thumbnail.width,
                class: 'panel panel-default',
            }).appendTo('#div'+i)

            if(field.type === "video"){
                jQuery('<img/>', {
                    src: '/img/youtubeIcon.png',
                    class: 'youtubeIcon'
                }).appendTo('#article'+i)

                jQuery('<button/>', {
                    id: 'playBtn'+i,
                    class: 'playBtn'
                }).appendTo('#article'+i)

                jQuery('<img/>', {
                    src: '/img/playIcon.png'
                }).appendTo('#playBtn'+i)
            }

            jQuery('<div/>', {
                class: 'panel-heading '+field.type,
                id: 'panelHeading'+i,
                title: field.title,
            }).appendTo('#article'+i)

            jQuery('<p/>', {
                text: field.title,
                class: 'panel-title'
            }).appendTo('#panelHeading'+i)

            var updated = '',
            now = Date.now(),
            secondsSince = ((now - field.updated)/1000),
            years = Math.floor(secondsSince / 31536000),
            days = Math.floor((secondsSince % 31536000) / 86400),
            months = days/30,
            hours = Math.floor(((secondsSince % 31536000) % 86400) / 3600),
            minutes = Math.floor((((secondsSince % 31536000) % 86400) % 3600) /60)

            if (years > 1){
                updated = years + ' years ago'
            }
            else if (years > 0) {
                updated = years + ' year ago'
            } else if (months > 1){
                updated = months + ' months ago'
            } else if (months > 0){
                updated = months + ' month ago'
            } else if (day > 1){
                updated = days + ' days ago'
            } else if (day > 0){
                updated = days + ' day ago'
            } else if (hours > 1) {
                updated = hours + ' hours ago'
            } else if (hours > 0) {
                updated = hours + ' hour ago'
            }   else if (minutes > 1) {
                updated = minutes + ' minutes ago'
            } else {
                updated = 'A minute ago'
            }

            jQuery('<p/>', {
                text: updated,
                class: 'updated'
            }).appendTo('#panelHeading'+i)              
        })
    })
})
</script>
</body>
</html>

CSS:

article {
    border-radius: 0;
    text-align: center;
    position: relative;
}
.container{
    margin-top: 90px;
}
.youtubeIcon {
    height: 25px;
    width: 50px;
    display: inline;
    position: absolute;
    top: 1px;
    left: 2px;
}

.playBtn {
    position: relative;
    margin-top: 34px;
    display: inline-block;
    float: none;
    background-color: transparent;
    border: none;
    vertical-align: middle;
}
.playBtn img{
    width: 50px;
    opacity: 0.85;

}
.wrapper{
    padding: 0;
}
.panel-default{
    border-radius: 1px;
    margin: 0;
    text-align: center;
}
.panel-heading {
    text-align: left;
    position: absolute;
    bottom: 2px;
    left: 0.5%;
    right: 0.5%;
    opacity: 0.75;
    padding: 1px 7px 2px 6px;
    margin: 0;
    padding 0;
}
@media (min-width: 768px) {
    article:first-child .panel-heading {
        left: 0.25%;
        right: 0.25%;
    }
}
.panel-default>.panel-heading{
    background-color: #808080;
    border-radius: 1px;
    border: none;
}
.panel-heading p{
    color: white;
    font-size: 10px;
    paddig: 0;
    margin 0;
}
.panel-heading p:first-child{
    display: inline;
}
.panel-heading p:last-child{
    font-size: 8px; 
    padding-top: 2px;
    float: right;
}
.updated{
    margin-bottom: 0;
    right: 0;
}

Answer 1

为您的包装器提供响应宽度，例如 width:100%(或其他)，并让 child 继承它。