使用響應式設計重新創建絕對按鈕位置

我在將問題從絕對位置重新創建爲「相對」或響應式設計時遇到了問題。它有點像花朵，中間有核心（標誌或按鈕），花瓣（更多按鈕）圍繞它。我需要做這個設計，因爲我只是使用我的顯示器，這很好，但現在其他人會用我想要的不同尺寸的顯示器來看它，所以花瓣將保持相對於核心和核心的相同距離將保持相對於div的中心。使用響應式設計重新創建絕對按鈕位置

這裏是的jsfiddle：https://jsfiddle.net/o0a0Lv4a/

這裏是CSS也：

.button { 
    background-color: #000000; 
    color: #FFFFFF; 
    float: right; 
    padding: 10px; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
} 
.button.big-btn { 
    width: 90px; 
    height: 40px; 
} 

.button1{ 
    position: absolute; 
    left: 225px; 
    top: 15px; 
} 
.button2{ 
    position: absolute; 
    left: 100px; 
    top: 45px; 
} 
.button3{ 
    position: absolute; 
    left: 350px; 
    top: 45px; 
}.button4{ 
    position: absolute; 
    left: 225px; 
    top: 90px; 
} 
.button5{ 
    position: absolute; 
    left: 100px; 
    top: 125px; 
} 
.button6{ 
    position: absolute; 
    left: 350px; 
    top: 125px; 
} 
.button7{ 
    position: absolute; 
    left: 225px; 
    top: 175px; 
}

我也試着做「顯示：塊;最大寬度：100％」，這是偉大的調整按鈕，但無助於移動它們。

來源

2016-11-09 Nate

硬盤從你的描述想象。附上兩個模型，以便我們看到你正在談論的行爲 – tmslnz

相對思維，px可能不會和百分比一樣好。我也會考慮使用變換和變換原點。 –

@tmslnz這裏是JSFIddle的屏幕截圖，我也將編輯帖子：https：//i.imgur.com/wjuQEbS.png – Nate

你可以使用flexbox和幾個標記改變

.wrap, .col { 
 
    display: flex; 
 
} 
 
.wrap .col { 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 

 
.button { 
 
    background-color: #000000; 
 
    color: #FFFFFF; 
 
    padding: 10px; 
 
    border-radius: 10px; 
 
    margin: 10px; 
 
} 
 
.button.big-btn { 
 
    width: 90px; 
 
    height: 40px; 
 
}

<div class="wrap"> 
 
    <div class="col"> 
 
    <div class="button big-btn button1">Button 1</div> 
 
    <div class="button big-btn button2">Button 2</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="button big-btn button3">Button 3</div> 
 
    <div class="button big-btn button4">Button 4</div> 
 
    <div class="button big-btn button5">Button 5</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="button big-btn button6">Button 6</div> 
 
    <div class="button big-btn button7">Button 7</div> 
 
    </div> 
 
</div>

來源

2016-11-09 20:33:19 LGSon

使用響應式設計重新創建絕對按鈕位置

回答

相關問題