Question

我开始了解媒体查询，并且在设置div时遇到问题。 .brandImg和.brandCopy分别包含在.brandList中，分别为50％，50％和100％。为什么我的div只转换为700px而没有为700px添加任何媒体查询？

HTML

<div class="brandList">

    <div class="brandImg">
        <a href="#"><img src="http://placehold.it/600x400" /></a>
    </div>

    <div class="brandCopy">
        <ul>
            <li><span>
                <a href="#" class="brandLogo"><img src="images/gpj-baker-text.png" width="162" height="25" /></a>
            </li></span>

            <li><span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare faucibus nibh, quis hendrerit eros luctus sed. Nullam at lacinia dui. Phasellus ullamcorper neque turpis, nec luctus sapien tempor vitae. Pellentesque a vestibulum arcu. Fusce volutpat eu ipsum nec ornare. Nulla nec viverra lorem. Donec imperdiet lacus ac turpis ornare.</p>
            </li></span>

            <li><span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare faucibus nibh, quis hendrerit eros luctus sed. Nullam at lacinia dui. Phasellus ullamcorper neque turpis, nec luctus sapien tempor vitae. Pellentesque a vestibulum arcu. Fusce volutpat eu ipsum nec ornare. Nulla nec viverra lorem. Donec imperdiet lacus ac turpis ornare.</p>
            </li></span>

            <li><span>
                <a href="#" class="uppercase">Explore <i class="fa fa-caret-right"></i></a>
            </li></span>
        </ul>
  </div>

<div class="clearfloat"></div>

</div> <!-- end brandList -->

CSS

.brandContainer {
    text-align: center;
    vertical-align: middle;
}

.brandList {
    display: block;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

    .brandList:last-child {
        border-bottom: 0px;
        padding: 0 0 16px 0;
    }

        .brandList:last-child::after {
            display: none;
        }

    .brandList::after {
        border-bottom: 1px solid #676767;
        content: '';
        display: block;
        height: 1px;
        margin: 16px 16px 20px 16px;
        max-width: 98%;
        vertical-align: middle;
    }

.brandImg {
    align: center;
    display: inline-block;
    float: left;
    margin: 0 auto;
    min-width: 360px;
    overflow: hidden;
    padding: 0 0 0 16px;
    text-align: center;
    vertical-align: middle;
    width: 48%;
}

    .brandImg a img {
        display: block;
        height: auto;
        width: 100%;
        vertical-align: middle;
    }

.brandCopy {
    display: inline-block;
    float: left;
    min-width: 360px;
    overflow: auto;
    padding: 0 16px 0 16px;
    width: 48%;
}

.brandCopy ul {
    display: table;
    min-width: 320px;
    table-layout: fixed;
    top: 50%;
}

.brandCopy li {
    display: inline;
    text-align: center;
    display: table-row;
}

    .brandCopy li span p {
        line-height: 150%;
        text-align: left;
    }

    .brandCopy li span a {
        font-size: 75%;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
    }

    .brandCopy li span a:link,
    .brandCopy li span a:visited {
        color: #4284b8;
        font-weight: bold;
        text-decoration: none;
    }

    .brandCopy li span a:hover {
        color: #959595;
    }

.brandCopy span {
    display: table-cell;
    padding-top: 16px;
    vertical-align: middle;
}

Answer 1

这可以通过在两个元素周围放置div来最简单地解决，最大宽度为100％（或者因为边距和填充而可能是98％。

上面的div为100，内部的两个元素没有任何移动的理由。

如何防止div使用媒体查询移动

1 个答案: