La propiedad de ancho se usa para llenar un espacio horizontal restante div usando CSS. Al establecer el ancho en 100%, toma todo el ancho disponible de su padre.
Sintaxis:
width: 100%;
Ejemplo 1: este ejemplo usa la propiedad de ancho para llenar el espacio horizontal. Configuró el ancho al 100% para llenarlo por completo.
html
<!DOCTYPE html>
<html>
<head>
<title>
make a div fill remaining
horizontal space
</title>
<!-- Style to fill remaining
horizontal space -->
<style>
#main {
height: 100px;
border: 1px solid black;
font-size: 20px;
font-weight: bold;
color: white;
}
#left {
float: left;
width: 180px;
height: 100%;
background-color: green;
}
#right {
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body style = "text-align:center;">
<div id = "main">
<div id="left">
DIV_1
</div>
<div id="right">
DIV_2
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa la propiedad de ancho para llenar el espacio horizontal. Configuró el ancho al 100% para llenarlo por completo.
html
<!DOCTYPE html>
<html>
<head>
<title>
Title
</title>
<style>
#main {
height: 100px;
border: 1px solid black;
font-size: 20px;
font-weight: bold;
color: white;
}
#left {
float: left;
width: 100px;
height: 100%;
background-color: green;
}
#center {
float: left;
width: 100px;
height: 100%;
background-color: blue;
}
#right {
width: 100%;
height: 100%;
background-color: green;
}
</style>
</head>
<body style = "text-align:center;">
<div id = "main">
<div id="left">
DIV_1
</div>
<div id="center">
DIV_2
</div>
<div id="right">
DIV_3
</div>
</div>
</body>
</html>
Producción:
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA