CSS 流体元素相互碰撞

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 宽度设置为百分比而不是固定像素值。