使用CSS的“社交共享图”样式按钮将DIV对齐到另一个包装DIV的底部

Question

Here is an image of what I have started building so far... 这是到目前为止我已经开始构建的图像。

在此处输入图片说明

The CodePen URL is http://codepen.io/jasondavis/pen/wBgwKe?editors=100 CodePen URL为http://codepen.io/jasondavis/pen/wBgwKe?editors=100

The problem I have isa shown in the screenshot above. 我的问题isa在上面的屏幕快照中显示。 I need to position the block of Social Netork DIV's at the bottom of the DIV that wraps around them. 我需要将Social Netork DIV的块放置在环绕它们的DIV的底部。

I have tried many different things, too many to list. 我尝试了许多不同的东西，太多了。 SOI have provided the code and a demo URL. SOI提供了代码和演示URL。

If anyone can help get the desired result without breaking anything else, I would greatly appreciate the help please? 如果有人能在不中断其他任何事情的情况下帮助您获得期望的结果，请给我很大的帮助吗？

The CSS CSS

/*  Social Count Graphs  */
.social-parent
{
    /* this is 100% for the elements */
    height: 300px;
    background-color: #ffffff;
  border-bottom: 1px solid #888888;
  vertical-align: bottom;
}

.social-item
{
    display: inline-block;
    width: 30px;
    background-color: blue;
    margin-right: 4px;
}

.social-parent .twitter{
  background-color: #5EC2DF;
}

.social-parent .facebook{
  background-color: #2C6087;
}

.social-parent .googleplus{
  background-color: #E03E12;
}

.social-parent .linkedin{
  background-color: #3686AB;
}

.social-parent .pinterest{
  background-color: #B61B28;
}

.social-parent .bufferapp{
  background-color: #343434;
}



.social-item a{

border-radius: 2px;
display: block;
font-size: 11px;
font-weight: bold;
height: 100%;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}

.social-item-icon{
display: block;
height: 100%;
left: 7px;
padding-top: 9px;
position: absolute;
top: 0;
width: 10%;
}

.social-item-icon svg {
height: 17px;
width: 17px;
}
svg:not(:root) {
overflow: hidden;
}


.social-item-icon svg path,
.social-item-icon svg polygon {
fill: #FFF;
}

The HTML HTML

<div class="social-parent">
    <div class="social-item twitter">
      <a href="http://twitter.com/home?status=Sharing%20Buttons%20by%20%20and%20@dbox%20http:///labs/rrssb" class="popup">
        <span class="social-item-icon">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
            <path d="M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32
                     c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155
                     C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965
                     C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683
                     c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851
                     C26.275,7.229,25.39,8.196,24.253,8.756z"></path>
          </svg>
        </span>
      </a>
    </div>

    <div class="social-item facebook">
      <a href="https://www.facebook.com/sharer/sharer.php?u=http:///labs/rrssb/index.html" class="popup">
        <span class="social-item-icon">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
            <path d="M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434
                                        c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726
                                        c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z"></path>
          </svg>
        </span>
      </a>
    </div>

    <div class="social-item googleplus">
      <a href="https://plus.google.com/share?url=Check%20out%20how%20ridiculously%20responsive%20these%20social%20buttons%20are%20http:///labs/rrssb/index.html" class="popup">
        <span class="social-item-icon">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
            <g>
              <g>
                <path d="M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663
                         c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027
                         C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068
                         c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562
                         c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41
                         c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511
                         c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478
                         c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492
                         c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479
                         c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z"></path>
                <polygon points="23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004
                                 23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89      "></polygon>
              </g>
            </g>
          </svg>
        </span>
      </a>
    </div>

    <div class="social-item linkedin">
      <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http:///labs/rrssb/index.html&amp;title=Sharing%20Buttons&amp;summary=Responsive%20social%20icons%20by%20KNI%20Labs" class="popup">
        <span class="social-item-icon">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
            <path d="M25.424,15.887v8.447h-4.896v-7.882c0-1.979-0.709-3.331-2.48-3.331c-1.354,0-2.158,0.911-2.514,1.803
                                        c-0.129,0.315-0.162,0.753-0.162,1.194v8.216h-4.899c0,0,0.066-13.349,0-14.731h4.899v2.088c-0.01,0.016-0.023,0.032-0.033,0.048
                                        h0.033V11.69c0.65-1.002,1.812-2.435,4.414-2.435C23.008,9.254,25.424,11.361,25.424,15.887z M5.348,2.501
                                        c-1.676,0-2.772,1.092-2.772,2.539c0,1.421,1.066,2.538,2.717,2.546h0.032c1.709,0,2.771-1.132,2.771-2.546
                                        C8.054,3.593,7.019,2.501,5.343,2.501H5.348z M2.867,24.334h4.897V9.603H2.867V24.334z"></path>
          </svg>
        </span>
      </a>
    </div>

    <div class="social-item pinterest">
      <a href="http://pinterest.com/pin/create/button/?url=http:///labs/rrssb/index.html&amp;media=http:///labs/rrssb/media/facebook-share.jpg&amp;description=sharing%20buttons%20by%20KNI%20Labs.">
        <span class="social-item-icon">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
            <path d="M14.021,1.57C6.96,1.57,1.236,7.293,1.236,14.355c0,7.062,5.724,12.785,12.785,12.785c7.061,0,12.785-5.725,12.785-12.785
                                    C26.807,7.294,21.082,1.57,14.021,1.57z M15.261,18.655c-1.161-0.09-1.649-0.666-2.559-1.219c-0.501,2.626-1.113,5.145-2.925,6.458
                                    c-0.559-3.971,0.822-6.951,1.462-10.116c-1.093-1.84,0.132-5.545,2.438-4.632c2.837,1.123-2.458,6.842,1.099,7.557
                                    c3.711,0.744,5.227-6.439,2.925-8.775c-3.325-3.374-9.678-0.077-8.897,4.754c0.19,1.178,1.408,1.538,0.489,3.168
                                    C7.165,15.378,6.53,13.7,6.611,11.462c0.131-3.662,3.291-6.227,6.46-6.582c4.007-0.448,7.771,1.474,8.29,5.239
                                    c0.579,4.255-1.816,8.865-6.102,8.533L15.261,18.655z"></path>
          </svg>
        </span>
      </a>
    </div>

    <div class="social-item bufferapp">
      <a href="http://twitter.com/home?status=Sharing%20Buttons%20by%20%20and%20@dbox%20http:///labs/rrssb" class="popup">
        <span class="social-item-icon">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
            <path d="M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32
                     c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155
                     C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965
                     C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683
                     c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851
                     C26.275,7.229,25.39,8.196,24.253,8.756z"></path>
          </svg>
        </span>
      </a>
    </div>
</div>

The JavaScript JavaScript

// Social Share Graphs

jQuery(document).ready( function($) {


  // Get percentages based on total combined shares across all networks
  /*
Twitter: 5, Facebook: 3, LinkedIn: 1;
comulated: 9.
Percentages: 
(5/9)*100 = 55.55%
(3/9)*100 = 33.33%
(1/9)*100 = 11.11%
*/


  var socialEngagement = {};
  socialEngagement.twitter = "55.55%";
  socialEngagement.facebook = "33.33%";
  socialEngagement.googleplus = "11.11%";
  socialEngagement.linkedin = "11.11%";
  socialEngagement.pinterest = "11.11%";
  socialEngagement.bufferapp = "11.11%";

  document.querySelector(".social-item.twitter").style.height = socialEngagement.twitter;
  document.querySelector(".social-item.facebook").style.height = socialEngagement.facebook;
  document.querySelector(".social-item.googleplus").style.height = socialEngagement.googleplus;
  document.querySelector(".social-item.linkedin").style.height = socialEngagement.linkedin;
  document.querySelector(".social-item.pinterest").style.height = socialEngagement.pinterest;
  document.querySelector(".social-item.bufferapp").style.height = socialEngagement.bufferapp;

});

Answer 1

There might be a better way to do this, but you could add a blank element with height:100% set to display: inline-block which would force the other elements down to the baseline: 也许有更好的方法，但是您可以添加一个height:100%设置为display: inline-block的空白元素，这将迫使其他元素降至基线以下：

.wrapper{
  height: 100%;
  display: inline-block;
  vertical-align: bottom;
}

EXAMPLE 1 例1

EDIT 编辑

Actually I figured out a better solution. 实际上，我想出了一个更好的解决方案。 Set the parent .social-parent , wrap each one in a container and set that to display: table-cell with height: 100% 设置父.social-parent ，将每个包裹在一个容器中，并设置为display: table-cell height: 100% display: table-cell

EXAMPLE 2 例子2

Answer 2

.social-parent
{
    /* this is 100% for the elements */
    height: 300px;
    background-color: #ffffff;
    border-bottom: 1px solid #888888;
    vertical-align: bottom;
    position : relative;  /* new added */

}

then :- 然后：-

.social-item
{
    display: inline-block;
    width: 30px;
    background-color: blue;
    margin-right: 4px;
    position : absolute; /* new added */
    bottom : 0px; /* new added */
}

.social-parent .twitter{
  background-color: #5EC2DF;
  left : 0px;
}

.social-parent .facebook{
  background-color: #2C6087;
  left : 40px;
}

.social-parent .googleplus{
  background-color: #E03E12;
  left : 80px;
}

.social-parent .linkedin{
  background-color: #3686AB;
  left : 120px;
}

.social-parent .pinterest{
  background-color: #B61B28;
  left : 160px;
}

.social-parent .bufferapp{
  background-color: #343434;
  left : 200px;
}

Thanks :) 谢谢：）

使用CSS的“社交共享图”样式按钮将DIV对齐到另一个包装DIV的底部

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-01-07 03:24:48

EDIT 编辑

解决方案2
0 2015-01-07 03:30:35

使用CSS的“社交共享图”样式按钮将DIV对齐到另一个包装DIV的底部

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-01-07 03:24:48

EDIT 编辑

解决方案2 0 2015-01-07 03:30:35

解决方案1
2 已采纳 2015-01-07 03:24:48

解决方案2
0 2015-01-07 03:30:35