Question

一旦达到某个页面宽度，我无法隐藏并显示div - 我的想法是，在移动尺寸时，我会将div转换为另一个div。具体来说，我使用issuu来显示乐谱，但出于某种原因，它在我想要的时候不会显示。它清晰可见，因为它占用空间，但由于某种原因我无法看到它。在13英寸的Macbook上放大250％它显示为占用空间，但实际上并不可见。任何帮助将不胜感激！

以下是代码：

HTML：

            <div id="musiccontent">
            <div id="musicheader">
                Shades of Red (2012)
            </div>
                <div data-configid="11690692/7620748" style="width: 525px; height: 340px;" class="issuuembed"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
                <div id="issuumobile">
                    <div data-configid="11690692/8138261" style="width: 320px; height: 207px;" class="issuumobile"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
                </div>
                <audio controls>
                    <source src="music/Shades of Red.mp3" type="audio/mpeg">
                </audio>
            <p>Recording from an informal reading by the UCSB Chamber Orchestra, conducted by Christopher Rountree.</p>
            <br>
        </div>
    </div>

CSS：

正常显示：

.issuuembed{
    margin: 0 auto;
    display: block;
}

.issuumobile{
    margin: 0 auto;
    display:none;
}

媒体查询显示：

@media screen and (max-width: 600px){
#images{display: none;}

body{
    padding-left: 2%;
    padding-right: 2%;
}

.eventtext{width: 75%; /* 400 / 1080px */}

.line{width:75%;}

table th:first-child, th:nth-child(2), th:nth-child(3), th:nth-child(4){
    display: none;
}
table td:nth-child(2), td:nth-child(3), td:nth-child(4){
    display: none;
}

td{width:85%;}

#tablelist{display: none;}

.issuuembed{
    float: center;
    display:none !important;}

.issuumobile{
    float:center;
    display:block !important;
}
}

网站：http://cristinalord.com/shadesofred.html

Answer 1

首先，由于您设置了宽度/高度属性

，因此占用空间

其次，我删除了!important，因为它们似乎优先于许多事情。

.issuuembed{
    margin: 0 auto;
    display:none
}

#issuumobile{
    margin: 0 auto;
    display:block;
}

第三，您需要将图像放在div中以显示/隐藏

<强> See Demo

在您发表评论之后，我更多地使用了HTML并更改了此

<div id="issuumobile">
    <div data-configid="11690692/8138261" class="issuumobile"></div>
</div>

到这个

<div id="issuumobile" data-configid="11690692/8138261" class="issuuembed"></div>

UPDATED DEMO

Answer 2

首先，您只需加载embed.js一次。

其次，您需要issuuembed课程。

所以这是解决方案

请注意新引入的课程mobile-issuu和desktop-issuu

所以这是默认样式

.desktop-issuu {
    width: 525px;
    height: 340px;
    margin: 0 auto;
    display: block;
}

.mobile-issuu {
    width: 320px;
    height: 207px;
    margin: 0 auto;
    display:none;
}

以下是使用@media screen and (max-width: 600px)

的媒体查询时应用的样式

.desktop-issuu {
    display:none;
}
.mobile-issuu {
    display:block;
}

标记

<div data-configid="11690692/7620748" class="issuuembed desktop-issuu"></div>
<div class="mobile-issuu">
    <div data-configid="9032795/8168837" style="width: 320px; height: 207px;" class="issuuembed"></div>
</div>

请注意，我现在正在最后加载embed.js，以确保DOM在尝试访问DOM之前已准备就绪。

Demo here

即使在添加display：block之后div也不可见

2 个答案: