http://codepen.io/anon/pen/xgask

SCSS

.container
  width: 80%
  margin: 0 auto
  outline: 2px solid green
  overflow: hidden /* Only used this here as a clearfix */

.text, .avatar
  float: left

.text
  width: 70%
  outline: 1px solid red

.avatar
  width: 25%
  margin-left: 5%
  outline: 1px solid blue

  img
    display: block
    max-width: 100%

HTML

<div class="container">
  <div class="text">
    <p>Lots of text ...<p>
    <p>Lots of text ...</p>
  </div>
  <div class="avatar">
    <img src="http://www.foxprime.net/wp-content/uploads/2013/08/gravity-max-roller-coaster.jpg" />
  </div>
</div>

在完美的桌面尺寸上。如果第一个元素中的文本比第二个元素中的图片长，则文本不会在下面包裹，这就是我想要的。

但是，在移动尺寸上，我希望文本元素为全宽，图片要向右浮动，以便文本环绕。

有两个单独的元素，因为它们是不可能的，所以使用类似enquire.js之类的javascript来对媒体查询作出反应然后分离图片并将其放在文本元素的开头并且具有一种让它漂浮的风格。

我知道如何编写所有代码，没有问题，只是询问是否适合使用一点点javascript来帮助我获得我想要的响应式布局？

Answer 1

使用响应式Web设计，有许多方法可以完成同样的事情;没有一种方法是对的。

就个人而言，我会尝试制定一个仅限CSS的解决方案或一个解决方案来重新组织我的HTML标记，以达到理想的结果。只有当我已经用尽所有选项来制作CSS / Markup-only解决方案时，我才会转向JavaScript。

换句话说，是的，如果JavaScript达到您的最终结果，则该JavaScript是合适的。但是，如果可以通过Markup / CSS操作而不使用JavaScript，那么总是是更好的选择。

Answer 2

如果您不介意首先放置.avatar列，则可以获得所需的确切结果。否则，我只是隐藏并用css显示，如果它只是一个图像。通常我会避免使用jQuery，除非它是绝对必要的，并且经过3年的响应时间，你会知道何时使用它以及什么时候不使用它。

http://codepen.io/anon/pen/nfvmj

这是移动优先。

将.avatar放在html中的.text之前：

.container {
    margin: 0 auto;
    width:90%;
    outline: 2px solid green;
      overflow: hidden;
        /* Only used this here as a clearfix */
}
.text {
    outline: 1px solid red
}
.avatar {
    float: right;
    width: 50%;
    margin:0 0 2% 2%;
}
.avatar img {
    max-width: 100%
}
@media (min-width:600px) { 
    .text {
        width: 70%;
        float: left;
    }
    .avatar {
        float: right
    }
    .container {
        width: 80%;
    }
    .avatar {
        width: 25%;
        margin: 0 0 0 5%;
    }
}

我应该使用javascript进行这种响应式设计吗？

http://codepen.io/anon/pen/xgask

2 个答案:

http://codepen.io/anon/pen/nfvmj