div中的按钮位置

Question

我有一个灵感的帖子样式：

所以当我尝试制作一个时，我会遇到一些问题，例如：

• 当我改变窗口大小时按钮不圆
• 社交图标不显示
• 我无法点击社交图标
• 没有响应

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

.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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6">
        <div class="media">
          <div class="media-body">
            <h1 class="lead text-center">THis a text</h1>

            <hr>
            <p class="small"> that you'll remeber and don't forget if that you want to forget you'll not able to.</p>

          </div>
          <a class="thumb">


            <img src="http://img02.deviantart.net/712d/i/2015/231/3/e/flat_landscape_by_eocdesigns-d96dbbn.jpg">

            <i class="fa fa-facebook" id="social-fb"></i>
            <i class="fa fa-twitter" id="social-tw"></i>
            <i class="fa fa-youtube" id="social-yt"></i>
            <i class="fa fa-reddit" id="social-rd"></i>
          </a>


        </div>
        <a href="Post.html"><button class="btn" id="btn" ><i class="fa fa-arrow-left"></i></button></a>
      </div>

    </div>
  </div>

Answer 1

当我改变窗口大小时按钮不圆

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

社交图标不显示

我建议使用绝对定位来放置它们。围绕图标宽度为 div，设置为 div 样式：

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

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

我无法点击社交图标

它们没有附加任何点击事件，你需要给它们一个onclick 事件或类似事件，或者用一个样式化的、可点击的组件包围它们，如a href="..." 或button。

另外，我建议在图像上使用width 和height 而不是max-width 和max-height，以便删除它下面的空白。