es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Quiero columnas en la misma fila sin saltos de línea (flexbox)

29 May, 2023 Programación

Mi problema es que he hecho dos columnas con el editor Gutenberg de WordPress que están una al lado de la otra. Quiero que el Texto de columna 1 esté en el lado izquierdo del grupo de bloques que he creado, y el Texto de columna 2 en el lado derecho.

Sin embargo, el Texto de columna 2 se desborda a otra línea cuando cambio el tamaño de pantalla a uno más pequeño. ¿Hay alguna solución para que los dos textos de columna permanezcan en la misma fila sin importar qué tan pequeña sea la pantalla?

Aquí hay una versión simple de mi código con HTML y CSS:

HTML:


<div class="wp-block-columns">
  <div class="wp-block-column column-1" style="flex-basis:80%">
    <p>Texto de columna 1</p>
  </div>
  <div class="wp-block-column column-2" style="flex-basis:20%">
    <p>Texto de columna 2</p>
  </div>
</div>

CSS:


.column-1 {
  display: flex;
  justify-content: flex-start;
  flex-basis: 80%;
  padding-left: 0.5rem;
}

.column-2 {
  break-inside: avoid-column;
  display: flex;
  justify-content: right;
  flex-wrap: nowrap;
  text-transform: uppercase;
  padding-right: 1rem;
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mantener los textos de dos columnas en la misma fila, puedes agregar el siguiente CSS a tu código:

    .wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
}

    Esto especifica un contenedor flexible con envoltura sin ajuste, lo que garantiza que las dos columnas permanezcan en la misma línea incluso cuando se redimensiona la pantalla. Puedes agregarlo al código CSS existente que tienes para las columnas.

    Aquí está la versión actualizada de tu código con el nuevo CSS agregado:

    HTML:


        <div class="wp-block-columns">
    <div class="wp-block-column  column-1" style="flex-basis:80%">
    Texto de la columna 1
    </div>
    <div class="wp-block-column column-2 style="flex-basis:20%">
    Texto de la columna 2
    </div>

    CSS:

      .wp-block-columns {
    display: flex;
    flex-wrap: nowrap;
  }

  .column-1 {
    display: flex;
    justify-content: flex-start;
    flex-basis: 80%;
    padding-left: 0.5rem;
  }

  .column-2 {
    break-inside: avoid-column;
    display: flex;
    justify-content: right;
    flex-wrap: nowrap;
    text-transform: uppercase;
    padding-right: 1rem;
  }

    Con este código actualizado, los textos de las dos columnas deberían permanecer en la misma línea incluso cuando se redimensiona la pantalla.

Comments are closed.