html - attribute - Columnas de altura igual con CSS

title html css

Question

Me gustaría usar el porcentaje para mi tabla css. Lamentablemente, no funciona para mí.

¿Qué pasa con este código? ¿Debo usar flexbox en lugar de mesa?

Me gustaría usar la tabla, porque me gustaría las mismas columnas de altura.

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Answer 1

Estoy arrojando una respuesta a una interpretación de la pregunta que difiere de @Michael_B. Con el estilo inicial de width: 50%; en los elementos li , creo que el resultado deseado es que los seis ítems de la lista fluyan en 2 columnas y 3 filas. Tal caso no se puede resolver fácilmente utilizando tablas CSS, pero es relativamente simple con flexbox.

ul {
  list-style: none;
  margin: 0;
  width: 100%;
  /*kills the irritating intial padding on uls in webkit*/
  -webkit-padding-start: 0;
  display: flex;
  flex-flow: row wrap;
  /*stretch is the default value, but it will force items to stretch to match others in their row*/
  align-items: stretch;
  /*below properties just emphasize the layout*/
  padding: 2px;
  background-color: green;
}
li {
  /*forces border-width and padding to be part of the declared with (50% in this case)*/
  box-sizing: border-box;
  width: 50%;
  /*list-item, inline-block, and block work equally well*/
  display: list-item;
  /*below properties just emphasize the layout*/
  border: white 2px solid;
  background-color: lightgreen;
}
/*I set this property to show what happens if 1 item has a different height*/

li:nth-child(3) {
  height: 40px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Answer 2

Aquí hay una muestra que usa elementos ul / li , 2 columnas que usan porcentaje y tienen la misma altura.

Como las tablas prefieren el diseño de tabla / fila / celda, reestructuré tu html un poco.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.table {
  display: table;
  width: 90%;
  height: 60%;
  padding-top: 5%;
  margin: 0 auto;
}
ul {
  display: table-row;
  list-style: none;
  margin: 0;
}

li {
  display: table-cell;
  width: 50%;
  border: 1px solid #999;
}

<div class="table">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <ul>
    <li>3</li>
    <li>4</li>
  </ul>
  <ul>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

Answer 3

Columnas de altura igual con Flexbox

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

CSS

ul { display: flex; }

Con el simple código anterior, puede poner cualquier cantidad de contenido en un elemento de la lista, y todos los elementos de la lista tendrán la misma altura.

MANIFESTACIÓN

Notas:

• Una configuración inicial de un contenedor flexible es flex-direction: row , lo que significa que los elementos secundarios (es decir, elementos flexibles) se alinearán horizontalmente.

• Otra configuración inicial de un contenedor flexible es align-items: stretch , lo que hace que los elementos flexibles se expandan en la altura completa (o ancho, dependiendo de flex-direction ) del contenedor.

• Juntos, ambas configuraciones anteriores crean columnas de igual altura.

• Las columnas Flex height height se aplican solo a los hermanos.

• Aplicar una altura a un elemento flexible anula la función de altura igual.

• Las columnas de altura igual se aplican solo a elementos flexibles en la misma línea .

• Cómo deshabilitar columnas de igual altura en Flexbox?

Compatibilidad con el navegador: FlexBox es compatible con todos los principales navegadores, excepto IE <10 . Algunas versiones recientes de navegador, como Safari 8 e IE10, requieren prefijos de proveedor . Para una forma rápida de agregar prefijos use Autoprefixer . Más detalles en esta respuesta .