jquery - 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

button not rounded when I change window size

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

social icons doesn't show

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

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

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

I can't click social icons

好吧，它们没有任何点击事件，您需要给它们一个 onclick 事件或类似的事件，或者用像 a href="这样的样式化的可点击组件包围它们...” 或 按钮。

此外，我建议使用 width 和 height 而不是 max-width 和 max-height图像，以删除其下方的空白区域。