Question

我正在玩这个设计 - http://codepen.io/meek/pen/MKPLLm - 并尝试制作一个div来显示文章图片，标题，描述和upvote计数器（很像reddit）。我想让它有点反应，但我对此非常缺乏经验。目前，我的主要问题是upvote按钮和计数器（div class news-vote）＆＃34;倒下了＃34;调整窗口大小时要更窄。

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

位置：绝对投票。并且位置：相对于包装器。然后向上投票将相对于其容器定位。所以你可以给出一个像：bottom：0这样的位置左：0

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

1 个答案: