0

我正在重建我的个人网站，我有两个元素并排浮动，首先是 80%，其次是 20%。

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 来帮助我获得我想要的响应式布局？

4

2 回答 2

3

使用响应式网页设计，有很多方法可以完成同样的事情；没有一种方法是正确的。

就我个人而言，我会尝试制定一个纯 CSS 解决方案或一个重组我的 HTML 标记的解决方案，以尽我所能达到预期的结果。只有当我用尽了所有选项来制作纯 CSS/标记的解决方案时，我才会转向 JavaScript。

换句话说，是的，如果 JavaScript 能够达到您的最终结果，它就是合适的。但是，如果可以通过标记/CSS 操作而不使用 JavaScript，那总是更好的选择。

于 2014-01-16T19:12:44.170 回答
0

如果您不介意将 .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%;
    }
}
于 2014-01-16T22:12:05.470 回答