CSS 帮助 - 如何通过响应式设计保持我的 div 就位

Question

我正在玩这个设计 - http://codepen.io/meek/pen/MKPLLm - 并尝试制作一个 div 来显示文章图片、标题、描述和点赞计数器(很像 reddit)。我想让它有点响应，但我对此非常缺乏经验。目前，我的主要问题是在将窗口调整为更窄时，投票按钮和计数器(div 类新闻投票)“下降”。

CSS for news-vote:

.news-vote {
  display: inline-block;
  text-align: center;
  min-width: 50px;
  width: 5%;
  vertical-align: top;
  float: right;
  height: 100px;
  line-height: 24px;
  padding-right: 20px;
  font-size: 15pt;
}

周围元素和包装器的 CSS:

.wrapper {
  padding: 0px 100px 0px 100px;
  text-align: center;
  min-width: 800px;
  width: 100%;
  display: inline-block;
  max-width: 1400px;
}

.div-wrapper {
  margin-top: 40px;
  background-color: $mid;
  border-radius: 10px;
  padding: 20px 20px 20px 20px;
  border: 2px $highlight solid;
}

.news {
  background-color: $lighter;
  text-align: left;
  padding: 0px 5px 0px 5px;
  height: 102px;
  width: 100%;
  min-width: 300px;

}

.news-img {
  display: inline-block;
  width: 9%;
  max-width: 100%;
  max-height: 100%;
  min-width: 90px;
}

.news-title {
  display: inline-block;
  height: 90px;
  vertical-align: top;
  margin-left: 3px;
  width: 80%;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
}

#title {
  color: $darker;
}

.news-img, .news-title {
  margin-top: 4px;
}

我不知道如何着手确保总是有较小尺寸的 upvote div 的空间。非常感谢帮助!

Answer 1

position:absolute赞成票。和位置:包装上的相对位置。然后 up vote 将相对于它的容器定位。所以你可以给赞成票这样的位置:bottom:0左 :0