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 占据剩余的页面高度。

相关问题

多个div通过flex布局 最大宽度为100px 超出三个div则换行展示 要求每个div标签有间隔 上下行有间隔 css

为了实现这个需求，你可以使用CSS的`display: flex`, `flex-wrap: wrap`, `justify-content: space-between`, 和 `margin` 属性。这里是一个简单的示例：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px; /* 上下行间隔 */
}

.item {
  width: 100px;
  box-sizing: border-box; /* 确保宽高包括内边距和边框 */
  margin-bottom: 10px; /* 下面相邻元素间距 */
}

/* 如果需要所有方向都有间隔，可以添加下面这行 */
.item::before,
.item::after {
  content: " ";
  display: block;
  height: 0;
  margin-top: 10px; /* 上面相邻元素间距 */
}

HTML部分：

<div class="container">
  <div class="item">Div 1</div>
  <div class="item">Div 2</div>
  <div class="item">Div 3</div>
  <!-- 添加更多的 div 根据需要 -->
</div>

当你有超过3个 `.item` 元素并且它们的总宽度大于容器的可用空间（即宽度小于400px），它们会自动换行到下一行。

使用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）的样式。