添加 CSS
- 将 <body> 元素的 text-align 属性设置为“center”。
- 设置“容器”的高度、边框、字体大小、字体粗细和颜色属性。
- 将浮动属性设置为“左”，将“左”的高度设置为 100%。此外，指定宽度并添加背景颜色属性。
- 将“右侧”的宽度和高度设置为 100%，并指定背景颜色属性。
body {
text-align: center;
}
#container {
height: 80px;
border: 1px solid #000;
font-size: 20px;
font-weight: bold;
color: #fff;
}
#left {
float: left;
width: 200px;
height: 100%;
background-color: #17ad37;
}
#right {
width: 100%;
height: 100%;
background-color: #969696;
}
现在，我们可以看到完整的代码。
使 <div> 元素填充剩余宽度的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
text-align: center;
}
#container {
height: 80px;
border: 1px solid #000;
font-size: 20px;
font-weight: bold;
color: #fff;
}
#left {
float: left;
width: 200px;
height: 100%;
background-color: #17ad37;
}
#right {
width: 100%;
height: 100%;
background-color: #969696;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
div 1
</div>
<div id="right">
div 2
</div>
</div>
</body>
</html>
让我们看看其他示例，其中我们还为 <div> 的“left”类使用设置为“hidden”的溢出属性。
使 <div> 从左侧填充剩余宽度的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.container {
width: 500px;
height: 100px;
border: 1px solid #000;
}
.left {
width: auto;
height: 100px;
background: #d1d1d1;
overflow: hidden;
}
.right {
height: 100px;
width: 100px;
background: #d69292;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="right"></div>
<div class="left"></div>
</div>
</body>
</html>
使 <div> 从右侧填充剩余宽度的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.container {
width: 500px;
height: 100px;
border: 1px solid #000;
}
.left {
width: auto;
height: 100px;
background: #d1d1d1;
overflow: hidden;
}
.right {
height: 100px;
width: 100px;
background: #d69292;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="right"></div>
<div class="left"></div>
</div>
</body>
</html>
创建 HTML
- 使用 <body> 元素。
- 添加一个 <div> 元素并其中放置另外两个带有 id 属性的 <div> 元素。
<body>
<div id="container">
<div id="left">
div 1
</div>
<div id="right">
div 2
</div>
</div>
</body>
日期：2020-06-02 22:15:09 来源：oir作者：oir