html - 如何正确地将 Google 日历包裹在 div 内并使其响应？

Question

我正在开发一个网站的右侧部分，顶部有一张图片幻灯片，我想在其正下方嵌入一个 Google 日历。我注意到 Google 日历没有响应能力，并且找到了一种使其响应的方法，但是我在使 Google 日历响应并使其保持在其 div 内时遇到了问题。

通过反复试验，我发现我要么让 Google 日历响应，要么在其 div 中对齐，而不是两者兼而有之。

需要注意的是，我不确定这是否有什么不同，但从我遵循的教程来看，为了使 Google 日历具有响应能力，iframe 需要 由 div 类包装。我尝试乱搞并尝试使用 div id，但日历停止响应。

Google Calendar being responsive but not properly aligned

Google Calendar properly aligned but not responsive

我假设问题是由于代码当前的设置方式造成的。有人可以解释一下如果我将 div 放在文章元素中是否可以吗？

这是 HTML:

  <!-- Right Section -->
<div class="col span_2_of_3">


    <!-- Events -->
    <article class="events">
        <h2>UPCOMING EVENTS</h2>
        <div id="slider">
            <figure>
                <a href="http://wrrc.ucdavis.edu/community.html"><img src="../images/vstories.jpg" alt=""></a>
                <a href="http://wrrc.ucdavis.edu/community.html"><img src="../images/WeeklyEvents-01.jpg" alt=""></a>
                <a href="http://wrrc.ucdavis.edu/community.html"><img src="../images/STEM4GIRLS.jpg" alt=""></a>
                <a href="http://wrrc.ucdavis.edu/community.html"><img src="../images/slide00.jpg" alt=""></a>
            </figure>
        </div>
        <!-- <button>VIEW CALENDAR</button> -->
    </article>


    <!-- Google Calendar -->
    <article class="calendar">
        <div class="responsive-iframe-container">
            <iframe src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23ffffff&amp;src=wrrcdavis%40gmail.com&amp;color=%2323164E&amp;ctz=America%2FLos_Angeles" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no" position="relative"></iframe>
        </div>
    </article>

</div>

这是 CSS:

  /*Columns*/
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_2_of_3 { 
    width: 66%;
    min-height: 500px;
    height:auto;  }
.span_1_of_3 { 
    width: 32%;
    min-height: 500px;
    height:auto; }


/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
    .col {  margin: 1% 0 1% 0%; }
    .span_2_of_3, .span_1_of_3 { width: 100%; }
}

/* Calendar */ 
.calendar{
border-top: none;
    list-style: none;
    margin-top: 100px;
    margin-bottom: 50px;
    padding-left: 0;
    text-align: center;
    width: 100%;
    }


/* Responsive iFrame */

.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}


.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 1

您还可以选择两个 div，每个都有不同的 View :

我对大容器使用了“月”日历嵌入选项:

<div class="responsive-iframe-container big-container">
    <iframe src="https://calendar.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;height=700&amp;wkst=1&amp;bgcolor=%23ffffff&amp;src=(your_src)&amp;color=%232952A3&amp;ctz=America%2FNew_York" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>

然后使用移动设备的“议程”日历嵌入选项:

<div class="responsive-iframe-container small-container">
    <iframe src="https://calendar.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;mode=AGENDA&amp;height=800&amp;wkst=1&amp;bgcolor=%23ffffff&amp;src=(your_src)&amp;color=%232952A3&amp;ctz=America%2FNew_York&amp;mode=AGENDA" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>

在页面顶部添加 css 即可发挥其魔力:

<style>
 @media (max-width: 550px) {
     .big-container {display: none;}
 }
 @media (min-width: 550px) {
     .small-container {display: none;}
 }
 /* Responsive iFrame */
 .responsive-iframe-container {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 30px;
     height: 0;
     overflow: hidden;
 }
 .responsive-iframe-container iframe,   
 .vresponsive-iframe-container object,  
 .vresponsive-iframe-container embed {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }
 </style>

当我第一次测试它时，当我调整页面大小时它们都会出现..不知道为什么。再次刷新后，它就像魅力一样发挥作用。所以试试吧! (Original source)