Question

我正在更新网站以使其响应。这可能不是最好的方法，但我的基本方法是添加bootstrap css和js，然后使用行和列在不同大小的屏幕上进行页面换行。

除了首页上的幻灯片外，一切都非常流畅。当我刷新浏览器时，这个幻灯片在所有不同的屏幕尺寸上都非常优雅地包装，但是当我只是调整浏览器窗口的大小时，我幻灯片右侧的文本列没有响应我想要的方式

幻灯片正在使用jquery cycle plugin。此时，我正在使用实时测试服务器，您可以看到实例here。

我的html标记如下所示：

    <div class="row"> 
<div class="col-xs-12">    

<div id="homepage_featured" class="rounded_shadow">
<div id="homepage_slideshow_container">
     <div id="homepage_slideshow"> 
        {% for post in slideshow_posts %}
        <div class="homepage_slide" style="background-color: #ffffff;">
            <div class="row">
            <div class="col-sm-6 col-xs-12">
              <center>  
                 <a href="{{ post.permalink }}"><img src="{{ post.image }}" class="img-responsive"/></a>
              </center>      
            </div> <!-- col -->
            <div class="col-sm-6 col-xs-12">
                 <div class="homepage_slide_copy">
                    <h4>{{ post.department }}</h4>
                    <h3><a href="{{ post.permalink }}">{{ post.title }}</a></h3>
                        {% if post.excerpt %}<p>{{ post.excerpt }}</p>{% endif %}
                    <p><strong>{{ post.author }}</strong></p>
                    <p><a href="{{ post.permalink }}" class="read_more">Read more</a></p>
                 </div> <!-- slide copy -->
           </div> <!-- col -->
           </div> <!-- row -->
       </div> <!-- homepage_slide -->
                            {% endfor %}
   </div> <!-- homepage_slideshow -->
   </div> <!-- homepage_slideshow_container -->
        <div class="row">
        <div id="homepage_slideshow_pager"></div>
        </div> <!-- row -->
</div> <!-- homepage_featured -->
</div> <!-- col -->
</div> <!-- row -->

相关的css看起来像这样。

#content #homepage_featured {
  margin-bottom: 10px;
  padding: 7px;
  background-color: #ffffff;
}

#content #homepage_slideshow {
  background-color: #ffffff !important;
  width: 100% !important;   
}

#content #homepage_slideshow_container {
  margin-bottom: 20px;
  width: auto !important;
  position: relative; 
  background-color: #ffffff;
}
#content #homepage_slideshow .homepage_slide {
  display: none;
}
#content #homepage_slideshow .homepage_slide:first-child {
  display: inline;
}
#content #homepage_slideshow .homepage_slide img {
  float: left;
}
#content #homepage_slideshow .homepage_slide .homepage_slide_copy {
  margin-left: 10px;
}
#content #homepage_slideshow_pager {
  width: auto;
  position: absolute;
  bottom: 10px;
  left:50%;
 } 
#content #homepage_slideshow_pager a {
  margin: 0 10px 10px 0;
  text-decoration: none;
  color: #dc4b46;
  display: inline;
  cursor: pointer;
}
#content #homepage_slideshow_pager a.activeSlide {
  border-bottom: 1px solid black;
}
#content .homepage_column {
  padding: 0.7em;
  background-color: white;
}
#content .homepage_current_issue_cover {
  -webkit-box-shadow: 2px 2px 3px lightgray;
  -moz-box-shadow: 2px 2px 3px lightgray;
  box-shadow: 2px 2px 3px lightgray;
    margin-bottom: .5em;
}
#content .homepage_column h4 a span {
  font-family: ff-meta-serif-sc-web-pro, 'Georgia', 'Times New Roman', 'Times', serif;
  font-size: 0.9em;
  text-transform: none;
  color: gray;
}

Answer 1

在main.css文件中

从#content #homepage_slideshow_container和#content #homepage_slideshow .homepage_slide

中取出所有样式

并添加这些样式

#content #homepage_slideshow_container {
  margin-bottom: 20px;
  width: auto !important;
  position: relative; 
  background-color: #ffffff;
   height:180px; !important;; 
  overflow:hidden;

}
#content #homepage_slideshow .homepage_slide {
  display:none;
  position:relative !important;
  width:100% !important;
  height:70% !important;; 
  overflow:hidden;
}

我注意到当你把窗口变小时，那张图片旁边的幻灯片放映内容溢出了它的父div，从而给你一个丑陋的外观（仅在刷新页面时才解决）..

除非我刷新

1 个答案: