Question

我在从绝对位置到“相对”或响应式设计重新创建此设计时遇到问题。它有点像花朵，中间有核心（标志或按钮），周围有花瓣（更多按钮）。我需要制作这个设计，因为我只是使用我的显示器，它很好但是现在其他人会用不同尺寸的显示器看它我想要它所以花瓣将保持相对于核心和核心的相同距离将保持相对于div的中心。

这是JSFiddle：here

这也是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％”，这对于调整按钮的大小非常有用，但对移动它们没有帮助。

https://jsfiddle.net/o0a0Lv4a/

Answer 1

您可以使用private static final String sFile = "Saved.txt"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ....... ....... //your code } //other method和一些标记更改

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

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

1 个答案: