La cuadrícula 960 ocupa todo el ancho con cambio de tamaño
Derrops
Tengo problemas para que mi 960.gs ocupe todo el ancho del navegador. Quiero que la cuadrícula sea del 100% al cambiar el tamaño, es decir, si me desplazo hacia afuera, el texto aparecerá más pequeño y ocupará menos líneas, pero la cuadrícula aún ocupará el 100% del ancho.
Hay esta pregunta aquí. Al usar la cuadrícula 960, ¿puedo tener una sección de encabezado de 100% de ancho? Y la respuesta fue establecer la parte superior al 100%. Agregué el código pero esto no tiene ningún efecto, tampoco lo hace establecer el ancho del cuerpo al 100% y todos los divs, ect. ¿Qué estoy haciendo mal? Aquí está el código:
<!doctype html>
<html>
<head>
<title>My Fragment</title>
<meta charset="utf-8" />
<!-- Symbols rendered -->
<meta name="value" />
<!-- Do not need to close -->
<link rel="stylesheet" href="css/960_12_col.css">
<style>
body {
background:green;
}
div {
background: white;
}
.grid_4 {
height: 100px;
}
</style>
</head>
<body>
<div class="header" style="width:100%;"></div>
<div class="mainWrapper container_12">
<div class="grid_4" style="background:red">sdfds</div>
<div class="grid_4" style="background:blue">sdfs</div>
<div class="grid_4" style="background:yellow">sdfs</div>
<div class="clear">sdfds</div>
</div>
</body>
</html>
Pero esto me da el siguiente resultado:
No quiero ver ningún espacio verde en el lado izquierdo de la columna roja y en el lado derecho de la columna amarilla, pero este no es el caso. ¿Cómo me deshago del espacio a ambos lados?
(Tenga en cuenta que soy nuevo en css y Html y he estado siguiendo el html de aprendizaje en 30 días, y cualquier otra cosa que encuentre en línea).
mwl
En primer lugar, <div class="header" style="width:100%;"></div>no está envolviendo su contenedor.
Segundo: agregue width: 100%a su mainWrapperclase en lugar de .header, pero sé que hay anchos codificados en el sistema de cuadrícula 960, por lo que sus columnas con .grid_4permanecerán quietas width: 300px.
Pruebe con otro sistema de cuadrícula con diseños fluidos, por ejemplo: http://www.designinfluences.com/fluid960gs/
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Editado en
Artículos relacionados
TOP Lista
- 1
¿Cómo ocultar la aplicación web de los robots de búsqueda? (ASP.NET)
- 2
Cómo utilizar HttpClient con cualquier certificado SSL, no importa lo "malo" que es
- 3
Modbus Python Schneider PM5300
- 4
Ver todos los comentarios en un video de YouTube
- 5
Visualización KNN: cómo dibujar un círculo alrededor de un punto de datos que se conecta a N puntos más cercanos usando R
- 6
Obtenga todos los comentarios y responda a los comentarios en un solo SQL
- 7
Search Dropdown Javascript - How to hide list?
- 8
¿Es una pila LAMJ un entorno posible?
- 9
Wie löse ich eine Hot-Codierung auf, wenn in meinen Testdaten Werte in einer Spalte fehlen?
- 10
Firebase Database recupera la suma de varios niños
- 11
Autocompletar con Java, Redis, elástico de la búsqueda, Mongo
- 12
Le snack-bar ne bouge pas FAB placé à l'intérieur du fragment
- 13
Estructura de la carpeta del proyecto Spring Boot para el cliente de descanso
- 14
Pregunta de fórmula de desplazamiento y transposición de Excel / Google Sheets
- 15
Événement OnSuspending non déclenché avec UWP Windows 10
- 16
jmeter + Selenium iDE
- 17
Cerrar el menú de material angular desde el controlador
- 18
WPF pleine largeur DataGridColumn sur la largeur de DataGrid
- 19
ElasticSearch: error al obtener bloqueos de nodo
- 20
¿Cómo volver a aplicar los cambios desde una rama remota con git pull?
- 21
¿Cómo puedo obtener mi próximo puntero de mi clase LinkedList sin usar la función incorporada?
Déjame decir algunas palabras