div中的按钮位置

时间:2017-07-06 13:55:28

标签: jquery html css bootstrap-4

我有一个灵感的帖子风格:

enter image description here

因此,当我试图制作一个时,我会遇到一些问题,例如:

    当我更改窗口大小时,
  • 按钮未四舍五入
  • 社交图标无法显示
  • 我无法点击社交图标
  • 没有回应
代码集上的

代码(https://codepen.io/youssefelmajbri/pen/eRjKoj):



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="display"></p>
&#13;
.media {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  width: 550px;
  height: 151px;
}

.media-body {
  padding: 20px;
}

.thumb {
  height: 150px;
  width: 250px;
}

img {
  max-width: 100%;
  max-height: 100%;
}

#social-fb {
  color: white;
  padding-top: 50%;
  padding-left: 20%;
  font-size: 20px;
}

#social-tw {
  color: white;
  font-size: 20px;
  padding-left: 20px;
}

#social-yt {
  color: white;
  font-size: 20px;
  padding-left: 20px;
}

#social-rd {
  color: white;
  font-size: 20px;
  padding-left: 20px;
}

#btn {
  border-radius: 50%;
  width: 8%;
  height: 7%;
  margin-top: -30;
  margin-left: -10;
  background-color: #E91E63;
  color: white;
}

.img {
  width: 20%;
  height: 10%;
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

  更改窗口大小时,

按钮未四舍五入

这是因为您使用百分比来设置按钮宽度/高度。这些百分比将是父元素的分数,因此8%的宽度和7%的高度不一定相等,如果父宽度/高度发生变化,这些尺寸也将如此。请改用静态值(px / em / rem等)。

  

社交图标无法显示

我建议使用绝对定位来放置它们。将图标宽度环绕为div,将其设置为div样式:

position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;

并将position: relative添加到父元素。

  

我无法点击社交图标

没有任何点击事件附加到他们身上,您需要为他们提供onclick事件或类似事件,或者使用样式可点击的组件(例如a href="..."或{{1})将其包围}。

此外,我建议在图片上使用buttonwidth代替heightmax-width,以便删除其下方的空白区域。