淘先锋技术网

首页 1 2 3 4 5 6 7

css div往右收缩

在网页设计中，常常使用

标签来划分页面结构。但是有时候我们需要让某个
标签往右收缩，以便节约页面空间或者更好地展示页面效果。这时候，我们可以使用CSS来控制这个
标签的样式，实现往右收缩的效果。
例如，我们有如下代码：
<div class="wrapper">
<div class="right">这是要往右收缩的内容</div>
<div class="left">这是其他内容</div>
</div>
我们可以通过设置CSS样式，让类名为“right”的
标签往右收缩，如下所示：
.wrapper {
display: flex;
justify-content: space-between;
}
.right {
flex: 0 0 auto;
}
.left {
flex: 1;
}
通过设置display为flex，并且设置justify-content为space-between，我们可以将.wrapper中的两个
标签对齐到容器的两侧，即左侧是类名为“left”的
标签，右侧是类名为“right”的
标签。同时，我们还需要设置.right的flex属性为0，表示这个
标签的大小不能变化，而.left的flex属性为1，表示这个
标签会占据剩余的所有空间。
这样，我们就可以通过CSS来控制一个
标签往右收缩的效果。如果你想让多个
标签往右收缩，你只需要分别设置它们的样式即可。