我有一个灵感的帖子风格:
因此,当我试图制作一个时,我会遇到一些问题,例如:
代码(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;
答案 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})将其包围}。
此外,我建议在图片上使用button
和width
代替height
和max-width
,以便删除其下方的空白区域。