我是CSS的新手,我正在尝试创建一个难以理解的动态布局。我也发现很难找到答案;大多数答案似乎都集中在调整图像大小上,这一点我已经搞清楚了。
我有一个在画布上绘制的图像,带有一个滑块元素,可以用javascript调整图像/画布的大小。这部分已经完成了-不需要帮助。
我想要的是四个按钮,两个在图像的左侧,两个在顶部,它们在图像调整大小时将它们的相对大小保持为图像的一半。也就是说,当图像变大时,我希望左侧的两个按钮扩展,以便每个按钮都继续占据图像高度的一半(减去图像之间的空白),顶部的两个按钮也是如此。
我在下面的图表中列出了我想要实现的目标。
有没有一种纯CSS的方式可以做到这一点?我不喜欢使用javascript进行主动调整大小,但如果这是唯一的方法,我也想知道。谢谢!
图像设置为较小时所需的布局:
图像设置为较大时所需的布局:
(按钮间距的改变不是故意的,它应该说两次“按钮3”和“按钮4",而不是”按钮3“)
发布于 2018-06-28 09:27:59
您可以使用CSS Grid执行此操作:
.container {
display: inline-grid;
grid-template:
" . btn3 btn4 " 50px
"btn1 resize resize" 1fr
"btn2 resize resize" 1fr
/50px 1fr 1fr;
grid-gap: 5px;
}
.resize { grid-area: resize; }
.btn1 { grid-area: btn1; }
.btn2 { grid-area: btn2; }
.btn3 { grid-area: btn3; }
.btn4 { grid-area: btn4; }
/* everything below this point is incidental */
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
button {
border-radius: 4px;
background: navy;
color: white;
border: 2px solid black;
}
.resize {
min-height: 150px;
min-width: 150px;
resize: both;
overflow: auto;
background: black;
color: white;
}
.vertical {
/*writing-mode: sideways-lr; /* not yet well-supported */
}
<div class="container">
<button class="btn1 vertical">Button 1</button>
<button class="btn2 vertical">Button 2</button>
<button class="btn3">Button 3</button>
<button class="btn4">Button 3?</button>
<div class="resize"></div>
</div>
我们使用grid-template
定义了一个三行三列的网格。第一行和第一列的设置大小为50px,但第二行和第三列平均分配剩余的空闲空间。图像分布在四个东南单元格上。
发布于 2018-06-28 06:30:58
您可以使用flexbox执行此操作,并依赖其拉伸默认行为。
下面是一个简化的示例:
* {
box-sizing: border-box;
}
.container {
border: 1px solid red;
display: inline-flex;
flex-direction: column;
}
.btn1 {
min-height: 50px;
margin-left: 58px;
}
.btn1 button {
border: 0;
background: blue;
color: #fff;
width: 50%;
height: 50px;
border: 1px solid;
}
.btn2 {
min-width: 50px;
}
.btn2 button {
border: 0;
background: blue;
color: #fff;
height: 50%;
width: 100%;
border: 1px solid;
}
.sub {
display: flex;
flex-direction: row;
}
.resize {
min-height: 100px;
min-width: 100px;
resize: both;
overflow: auto;
border: 1px solid green;
}
<div class="container">
<div class="btn1"><button>aa</button><button>bb</button></div>
<div class="sub">
<div class="btn2"><button>aa</button><button>bb</button></div>
<div class="resize"></div>
</div>
</div>
https://stackoverflow.com/questions/51072208
复制相似问题