Question

你好我在css中做了一个弹出效果它是一个包含两个浮动div的div，第一个宽度是主弹出的34.8％，第二个是65％现在我想在屏幕变小后改变整个弹出窗口的设计，所以我使用媒体查询来改变宽度并重新排列元素;但是它不会改变我认为它因为浮动的东西在这里是代码请帮忙

<div class="overlay"></div>
        <div class="popup">
            <div id="itemphoto">
                <img src="../images/stuff%20for%20sale/1.jpg" alt="none">
                <p id="itemtitle">IPhone 6s</p>
            </div>
            <div id="itemdesc">
                <p><span>Seller :</span> 116825349</p>
                <p><span>Seller Rate :</span> Trusted</p>
                <p><span>Lower Bid : </span>250</p>
                <p><span>Bidders :</span> 30</p>
                <p><span>Higher Bid : </span>366</p>
                <p><span>Brief Description :</span> SAN FRANCISCO — September 9, 2015 — Apple® today announced iPhone® 6s and iPhone 6s Plus, the most advanced iPhones ever, adding a powerful new dimension to iPhone’s revolutionary Multi-Touch™ interface. The new iPhones introduce 3D Touch, which senses force to enable intuitive new ways to access features and interact with content. iPhone 6s and iPhone 6s Plus feature Retina® HD displays made from the strongest glass on any smartphone and 7000 series aluminum, the same alloy used in the aerospace industry, in gorgeous metallic finishes that now include rose gold.</p>
            </div>
            <button id="bid">BID</button>
            <button id="notify">NOTIFY ME</button>
            <button id="close">CLOSE</button>
        </div>



.popup
{
width: 70%;
height: 550px;
background: #292929;
z-index: 1001;
position: fixed;
top :10%;
left: 15%;
border-radius: 15px;
 /* display: none;    */
}

.popup #itemphoto
{
width: 34.8%;
margin-right: 0.2%;
height: 450px;
float: left;
border-top-left-radius: 15px;
overflow: hidden;
background: #EFF1F2;
}




.popup #itemdesc
{
width: 65%;
height: 450px;
float: left;
border-top-right-radius: 15px;
padding: 20px;
overflow-y: scroll;
background: #EFF1F2;
}



 /*media queries*/


 @media screen and (max-width:1000px)
{
.popup
{
    width:80%;
    left: 10%;
}
#itemphoto
{
    float: none;
    width: 100%;
}

}

Answer 1

将您的媒体查询更改为：

.popup #itemphoto {
  float: none;
  width: 100%;
}

由于它比#itemphoto更具体，它保留了主css的属性，将其更改为可以正确应用。

https://jsfiddle.net/h5wbjcsq/

宽度在css中不会改变

1 个答案: