響應背景圖片社會圖標

我有段：響應背景圖片社會圖標

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

，我想他們是所有一行。如果客戶端將首先調整瀏覽器的大小，必須調整大小，並且div必須保留在右側。我怎樣才能做到這一點？我甚至不能把width和height 100％給fb圖標div，因爲它消失了。

JSfiddle demo

來源

2015-11-04 gsiradze

那你試試？ –

你想在用戶調整窗口大小時應用這些樣式，還是希望以某種寬度進行調整？ – Alex

@alirezasafian現在我已經修復了圖標上的寬度和高度。我希望他們改變窗口大小。例如百分比寬度，但是當我這樣做不起作用 – gsiradze

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

來源

2015-11-04 07:08:20

不是我的乾淨的工作，但你可以清理：https://jsfiddle.net/JTBennett/Lbkyzcav/4/

希望這是接近你問什麼，但它很難通過你的描述，告訴...

我會盡量避免使用絕對定位，雖然你可以用這個做到這一點：如果你指定一個他

position:absolute; right:0;

爲了包裝並將其漂浮在正確的位置，這裏有一個更清潔的東西 - 固有的位置是我認爲更好的方式。

這只是現在找到正確的高度和寬度的問題。

來源

2015-11-04 06:58:30 Joel

響應背景圖片社會圖標

回答

相關問題