Question

我有那个部分：

<section class="socialIcons">
  <div class="fbIcon"></div>
  <div class="fbIcon"></div>
  <div class="fbIcon"></div>
  <div class="someClass">
    <h2>text</h2>
  </div>
</section>

我希望他们成为一排。彼此离开，如果客户端将首先调整浏览器大小，社交图标必须调整大小，someClass div必须保持在右侧。我怎样才能做到这一点？我甚至无法将width和height 100％给予fb icons div，因为它已消失。

JSfiddle demo

Answer 1

JSFiddle Demo1

    .fbIcon {
       background: url(http://i.imgur.com/tLHwYNw.png) no-repeat;
       height: 80px;
       width: 80px;
       float: left;
       margin-right: 20px;
       margin-top: 12px;
       cursor: pointer;
       display:inline-block;
   }

.someClass {
    width: 50%;
    height: 90px;
    background: #ff7043;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    float: right;
    text-align: center;
    cursor: pointer;
    margin-top: 5px;
}

.someClass > h2 {
    color: #ffffff;
    margin: auto;
    font-size: 24px;
    vertical-align: middle;
    line-height: 90px;
}

或

JSFiddle Demo2

    .fbIcon {
    width: 14%;
    float: left;
    margin-right: 2%;
    margin-top: 12px;
    cursor: pointer;
    display: inline-block;
}

.someClass {
    width: 50%;
    height: 90px;
    background: #ff7043;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    float: right;
    text-align: center;
    cursor: pointer;
    margin-top: 5px;
}

.someClass > h2 {
    color: #ffffff;
    margin: auto;
    font-size: 24px;
    vertical-align: middle;
    line-height: 90px;
}

Answer 2

不是我最干净的工作，但你可以清理它：https://jsfiddle.net/JTBennett/Lbkyzcav/4/

希望这与你要求的很接近，但你的描述很难说明......

我会尽量避免使用绝对定位，尽管你可以这样做：

position:absolute; right:0;

如果你为包装纸指定了一个高度，并将你的风格包装纸放在那里，那就更清洁了 - 在我看来，固有的位置是更好的方法。

现在只需要找到合适的高度和宽度。

响应的背景图像社会图标

2 个答案: