html - 使用响应式设计重新创建绝对按钮位置

Question

我在将此设计从绝对位置重新创建为“相对”或响应式设计时遇到问题。它有点像一朵花，中间有核心( Logo 或按钮)，周围有花瓣(更多按钮)。我需要做这个设计，因为我只是用我的显示器，所以很好，但现在其他人会用不同尺寸的显示器看它，我想要这样花瓣相对于核心和核心保持相同的距离将保持相对于 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;
}

我也试过做“display: block; max-width:100%”这对调整按钮的大小很有帮助，但对移动它们没有帮助。

Answer 1

您可以使用 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>