html - 在换行之前使 div 宽度在给定范围之间振荡？

Question

我有一个父 div，里面有两个 child 。

<div id="middleHolder">
  <a href="#">
     <img>
  </a>
  <div id="sidebar">
     <p>content</p>
  </div>

我希望 a href 向左浮动并且为图像大小的 100% (655px X 506px)。我希望边栏向左浮动并与 a href 保持一致，只要它的宽度在 33.5% 到 27% 之间。然后，一旦宽度变小，我希望 div 换行并成为 100%。
有没有办法让 div 宽度在给定范围内摆动，然后再换行，而无需使用多个媒体查询？

下面是CSS:

#middleHolder > a {
  float: left;
  margin: 0 2% 2% 0;
  max-width: 655px;
  width: 100%;
  }

#socialMediaSidebar {
  float: left
  min-height: 506px;
  min-width: 270px;
  width: 27-33.5%;  /* Not accurate, but gives the idea of what I’m trying to accomplish */
  }

  @media width… /*unsure the specific size but would be inacted once socialMediaSidebar goes less then 270px. */

#socialMediaSidebar {
  width: 100%;
  }

Answer 1

您可以同时使用 max-width 和 min-width 来确保它保持在给定范围内。基于模型，如果内容不适合，它应该显示:如果给定范围不适合文档流，则阻止并下拉一行。

例子可以是:

#test {
    min-width: 25%;
    max-width: 37%;
    background: #CBA;
}

如图所示:

http://jsfiddle.net/e4j78ek6/1/