你如何正确地将谷歌日历包装在div中并使其响应？

Question

我正在网站的右侧工作，其中有一张顶部正在运行的图片幻灯片，我想在其下方嵌入Google日历。我注意到Google日历没有响应，我找到了一种方法来使其响应，但是我无法使Google日历做出响应，并使其保持在其中。

通过反复试验，我发现我可以让谷歌日历做出响应或在其中对齐，而不是两者。

只是要注意，我不确定这是否会有所不同，但是从我为了使Google日历做出响应所遵循的教程，iframe 需要 < / strong>由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，每个div都有不同的视图：

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

object.property
object['property']

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

<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>

扔进页面顶部的css来做它的魔力：

<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>

当我第一次测试它时，它们都出现在我调整页面大小时..不知道为什么。经过另一次刷新，它就像一个魅力。所以试试吧！ （Original source）