CSS代码：三个div标签，第一个div占据左侧，100%页面高度，100px宽度。第二、三个div在右侧上下分布，占据右侧剩余的宽度。第二个div60px高。第三个div占据剩余的页面高度。

可以这样写CSS代码：

<style>
    .left {
        width: 100px;
        height: 100%;
        float: left;
        background-color: red;
    }
    .right {
        height: 100%;
        margin-left: 100px;
    }
    .top {
        height: 60px;
        background-color: blue;
    }
    .bottom {
        height: calc(100% - 60px);
        background-color: green;
    }
</style>

<div class="left"></div>
<div class="right">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

其中，通过 `float: left` 和 `margin-left: 100px` 实现左侧和右侧的布局。使用 `calc()` 函数计算出右侧下方的 `bottom` div 占据剩余的页面高度。

相关问题

使用css,给下面的html 加上-|||-背景色:蓝色blue-|||-字体大小设置为:16px-|||-宽度:100px-|||-高度:100px-|||-代码如下: ​〈div class=“school”〉培黎职业学院〈／div〉

要给上述HTML代码添加CSS样式，可以使用以下代码：

<style>
.school {
  background-color: blue;
  font-size: 16px;
  width: 100px;
  height: 100px;
}
</style>

这段CSS代码将会给class为"school"的div元素添加背景色为蓝色（blue），字体大小为16像素（16px），宽度为100像素（100px），高度为100像素（100px）的样式。

一个div 宽度100% 高度10%,其中包含三个子div横向排列, 第一个子div,背景色蓝色,宽度10%,位置是显示屏水平居中,是element ui的日期选择器,其他两个子div,宽度都是10%,一个背景色黑色,一个背景色灰色 依次水平方向靠右,并且最右边的子div,距离右边距20px, 靠右的两个子div间隔10px,其中子div中间的div 中包含5个按钮水平排列,高度5px 宽度5px;

以下是将您提供的要求转化为 LESS 样式的代码：

.parent {
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
}

.child-blue {
  background-color: blue;
  width: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child-black {
  background-color: black;
  width: 10%;
  margin-left: 10px;
}

.child-gray {
  background-color: gray;
  width: 10%;
  margin-left: 10px;
  margin-right: 20px;
}

.button-container {
  display: flex;
}

.button {
  height: 5px;
  width: 5px;
}

这段 LESS 样式定义了一个父级容器 `.parent`，它使用了 `display: flex` 来实现子级容器的横向排列。`.child-blue` 使用了 `display: flex`、`justify-content: center` 和 `align-items: center` 来使内容水平居中。`.child-black` 和 `.child-gray` 使用 `margin-left` 来设置水平间距。`.button-container` 使用 `display: flex` 来使按钮水平排列。`.button` 定义了按钮的大小。

请注意，在 HTML 中使用相应的类名，并将 LESS 样式编译为 CSS 使用。