我在将此设计从绝对位置重新创建为“相对”或响应式设计时遇到问题。它有点像一朵花,中间有核心( 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%”这对调整按钮的大小很有帮助,但对移动它们没有帮助。
最佳答案
您可以使用 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>
关于html - 使用响应式设计重新创建绝对按钮位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40515380/