Question

我的css文件中的<h2>和<table>上方有一个@media (max-width: 1500px)标签。

当屏幕较小时，表从其div溢出，弹出的程度超过了上面的元素。很好。

我的问题是，我喜欢上面的<h2>以匹配表格的宽度。

请查看图片以进行澄清。

html

<div id="notifications">
    <h2 class='notifications_heading'>Notifications</h2>
    <table class='notifications_table'>
        {% for notification in queryset %}
        <tr>
            <td>{{ notification.actor }}</td>
            <td>{{ notification.verb }}</td>
            <td>{{ notification.timestamp|date }}</td>
        </tr>
        {% endfor %}
    </table>
</div>

css

#notifications {
    float: right;
    width: 500px;
    position: relative;
    margin-right: -840px;
}

@media (max-width: 1500px) {

    #notifications {
        float: right;
        width: 260px;
        margin-right: -290px;
        margin-top: 290px;
    }
}

.notifications_heading {
    background: #79aec8;
}

.notifications_table {
    width: 100%;
  }

https://imgur.com/kVZHq29

谢谢。

Answer 1

这是我最终使用的方法（它可能比它更冗长，但我不能轻易地缩短它）。它与Django Admin中的“最近操作”面板非常吻合。感谢Peter Josling Set div to have its siblings width。

<div id="notifications">
    <div class="wrapper">
        <div class="child">
            <div>
                <h2 class='notifications_heading'>Notifications</h2>
            </div>
        </div>
        <div>
            {% load notifications_tags %}

            <table class='notifications_table'>
                {% for notification in queryset %}
                <tr>
                    <td>{{ notification.actor }}</td>
                    <td>{{ notification.verb }}</td>
                        <td>{{ notification.timestamp|date }}</td>
                </tr>
            {% endfor %}
            </table>
        </div>
    </div> 
</div>

#notifications {
    float: right;
    width: 500px;
    position: relative;
    margin-right: -840px;
}

.notifications_table {
    width: 500px;
}

@media (max-width: 1500px) {

    #notifications {
        float: right;
        width: 260px;
        margin-right: -290px;
        margin-top: 290px;
    }

    .notifications_table {
        width: 100%;
    }
}

@media (max-width: 767px) {

    #notifications {
        width: 100%;
        margin: 0;
        padding-top: 30px;
    }

    .notifications_table {
        width: 100%;
    }

    .wrapper {
        width: 100%;
    }
}

/*  make <h2> adjust to fit table beneath */
.child {
    display: flex;
}

.child div {
    flex-grow: 1;
    width: 0;
}

.wrapper {
    display: inline-block;
}

Answer 2

您完全不必担心或使您的代码更加复杂...首先，您的媒体查询工作正常，表也正常工作，现在是愚蠢的错误，阻止了h2遵循相同的性质是您尚未在CSS的媒体查询部分下指定其性质...

请将其添加到CSS的媒体查询的h2部分：

.notification-heading {
  width: 100vw; 
}

使标题宽度与下表匹配

2 个答案: