Question

我的css遇到了一些麻烦，我会在stackoverflow上发帖，但我想也许这将是发布严格查看css问题的正确位置。我有一个jquery循环插件来旋转图像，我想在旋转器右侧有一块文本，但我不希望它运行到旋转器，我也希望它不会在页面时裁剪在理性中缩小了。现在，如果你将浏览器窗口拉到左边，它只是在旋转器下方滑动，我宁愿旋转器向左移动，直到它不能再进行，然后如果可能的话，文本应该开始向下扩展。但我似乎无法弄明白。

这是网站http://falconesuits.com/ hdere是css（至少是重要部分）

#story2 {
margin: 100px;
width:300px;
float:right;
color:#FFF;
}
.slideshow {
    width:300px;
    height:450px;
    background: #cc9966; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cc9966)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #fff,  #cc9966); /* for firefox 3.6+ */
    min-height: 100%;
    border:10px;
    border-style:groove;
    border-color:#939598;
    margin-left: auto;
    margin-right: auto;
    top: 100px;
}

Answer 1

一种可能有用的方法是通过将您的故事和幻灯片放在同一个div容器中来重构您的html：

<div id="content">
  <div id="story2">...</div>
  <div class="slideshow">...</div>
</div>

然后设置#content样式，使其具有流畅的边距。

#content {
  overflow: hidden;
  margin: 0 auto;
  width: 650px; 
  margin-top: 100px;
}

#story2 {
  width: 300px;
  float: right;
  color: #fff;
}

.slideshow {
  float: left;
  width:300px;
  height:450px;
  background: #cc9966; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cc9966)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #fff,  #cc9966); /* for firefox 3.6+ */
  min-height: 100%;
  border:10px;
  border-style:groove;
  border-color:#939598;
}

至于向下扩展文字，我猜你可以尝试将#story宽度设置为百分比而不是固定的像素值。

CSS流体元素相互碰撞

1 个答案: