1
我正在一個網站的正確部分工作，它有一張在頂部運行的圖片幻燈片，正下方我想嵌入Google日曆。我注意到Google日曆沒有響應，並且我找到了一種使其響應的方法，但是我無法使Google日曆響應並使其保持在div中。如何正確包裝Google Calendar內的div並使其響應？
通過試驗和錯誤我發現我可以讓Google日曆響應或對齊它的div，而不是兩者。
而只是要注意，我不知道這使得任何不同，但是從本教程我跟着爲了使谷歌日曆響應，在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&wkst=1&bgcolor=%23ffffff&src=wrrcdavis%40gmail.com&color=%2323164E&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%;
}