1

Esta pregunta es una tontería pero estoy tan acostumbrado a bootstrap que esto no lo he hecho hace siglos con css, el problema es que tengo un newsletter en el que se envían datos y quiero que la columna de la derecha este recta a una distancia,quiero hacerlo con css y no con grids adjunto una imagen

introducir la descripción de la imagen aquí

Este es el div que genera la imagen anterior:

<div style="color: #0D0D0D; font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; line-height: 150%; padding: 20px 10px 10px;">
  <div style="font-size: 12px; line-height: 18px; font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; color: #0D0D0D;">
    <p style="font-size: 14px; line-height: 21px; margin: 0;" align="left">
      <span style="color: #ec4d34; font-size: 14px; line-height: 21px;">
        <strong style="line-height: inherit;">
          Estos son los datos para tu presupuesto:
        </strong>
      </span>
    </p>
    <ul style="line-height: inherit;">
      <li style="font-size: 12px; line-height: 18px;font-weight: bold;">
        <span style="padding-right: 10%;width: 10%">Nombre:</span>
        <span style="font-weight: normal;margin-left: 5%">{{nombre}}</span>
      </li>
      <li style="font-size: 12px; line-height: 18px;font-weight: bold;">
        <span style="padding-right: 12%;width: 10%">Email:</span>
        <span style="font-weight: normal;margin-left: 5%">{{email}}</span>
      </li>
      <li style="font-size: 12px; line-height: 18px;font-weight: bold;">
        <span style="padding-right: 10%">Tel&eacute;fono:</span>
        <span style="font-weight: normal;margin-left: 5%">{{telefono}}</span>
      </li>
      <li style="font-size: 12px; line-height: 18px;font-weight: bold;">
        <span style="padding-right: 2%">Plazas Necesarias:</span>
        <span style="font-weight: normal;margin-left: 5%">{{plazas}}</span>
      </li>
      <li style="font-size: 12px; line-height: 18px;font-weight: bold;">
        <span style="padding-right: 7%">Fecha Inicio:</span>
        <span style="font-weight: normal;margin-left: 5%">{{inicio}}</span>
      </li>
      <li style="font-size: 12px; line-height: 18px;font-weight: bold;">
        <span style="padding-right: 9%">Fecha Fin:</span>
        <span style="font-weight: normal;margin-left: 5%">{{fin}}</span>
      </li>
      <li style="font-size: 12px; line-height: 18px;font-weight: bold;">
        <span style="padding-right: 11%">Origen:</span>
        <span style="font-weight: normal;margin-left: 5%">{{origen}}</span>
      </li>
      <li style="font-size: 12px; line-height: 18px;font-weight: bold;">
        <span style="padding-right: 10%">Destino:</span>
        <span style="font-weight: normal;margin-left: 5%">{{destino}}</span>
      </li>
      <li style="font-size: 12px; line-height: 18px;font-weight: bold;">
        <span style="padding-right: 4%">Observaciones:</span>
        <span style="font-weight: normal;margin-left: 5%">{{observaciones}}</span>
      </li>
    </ul>
  </div>
</div>

7
  • 2
    Agrega todo el código que tienes :D
    – fredyfx
    el 25 jul. 2019 a las 18:10
  • edita por favor coloca un título que describa de manera objetiva el problema presentado, edita y coloca el código mínimo necesario para replicar tu ejercicio y finalmente añade los errores obtenidos, te recomiendo lee Cómo preguntar
    – BetaM
    el 25 jul. 2019 a las 18:10
  • 1
    Ya tienes el texto de la primera columna en un elemento <span> Lo que yo haría es: 1. Borrar los estilos de este <span> y 2. en el CSS: li span:nth-child( 1 ){display:inline-block; width:200px}. Donde width:200px es solo un ejemplo. Esto tendría que ser la anchura de la primera columna.
    – enxaneta
    el 26 jul. 2019 a las 9:15
  • @enxaneta voy a probar a ver
    – KeTeMeTo
    el 26 jul. 2019 a las 14:35
  • 1
    @AlvaroMontoro es una plantilla para enviar correos, por eso quiero que todo este en la misma plantilla para evitar errores de carga de los estilos si los pongo externamente y esto produzca que la plantilla mail se vea de manera incorrecta
    – KeTeMeTo
    el 29 jul. 2019 a las 8:18

2 respuestas 2

1

Te dejo un ejemplo en el que declaro los estilos en el encabezado del mismo archivo para evitar que se vea de forma incorrecta como sugieres en tu comentario.

En .contenedor y .sub-contenedor conservo los estilos que definiste, pero uso h3 para el título y defino las clases .titulo y .descripcion para cada columna del listado.

Finalmente, la magia ocurre dentro del <div class="columnas"> en el que establezco un ancho fijo, un ancho de columna del 50% y que la información se va a distribuir en dos columnas.

Revisa y si tienes alguna duda, comenta!

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Dos columnas en CSS3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <style>
      .contenedor {
        color: #0D0D0D;
        font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
        line-height: 150%;
        padding: 20px 10px 10px;
      }

      .sub-contenedor{
        font-size: 12px;
        line-height: 18px;
        font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
        color: #0D0D0D;
      }

      h3{
        color: #ec4d34;
        font-size: 14px;
        line-height: 21px;
      }

      .titulo {
        font-size: 12px;
        line-height: 18px;
        font-weight: bold;
        list-style: none;
      }

      .descripcion {
        font-weight: normal;
        list-style: none;
      }

      .columnas {
        width: 300px;
        column-width: 50%;
        column-count: 2;
      }

    </style>
</head>
<body>
    <div class="contenedor">
      <div class="sub-contenedor">
        <h3>
          Estos son los datos para tu presupuesto:
        </h3>
        <div class="columnas">
          <li class="titulo">
            Nombre:
          </li>
          <li class="titulo">
            Email:
          </li>
          <li class="titulo">
            Teléfono:
          </li>
          <li class="titulo">
            Plazas Necesarias:
          </li>
          <li class="titulo">
            Fecha Inicio:
          </li>
          <li class="titulo">
            Fecha Fin:
          </li>
          <li class="titulo">
            Origen:
          </li>
          <li class="titulo">
            Destino:
          </li>
          <li class="titulo">
            Observaciones:
          </li>
          <li class="descripcion">
            {{Nombre}}
          </li>
          <li class="descripcion">
            {{Email}}
          </li>
          <li class="descripcion">
            {{Teléfono}}
          </li>
          <li class="descripcion">
            {{Plazas Necesarias}}
          </li>
          <li class="descripcion">
            {{Fecha Inicio}}
          </li>
          <li class="descripcion">
            {{Fecha Fin}}
          </li>
          <li class="descripcion">
            {{Origen}}
          </li>
          <li class="descripcion">
            {{Destino}}
          </li>
          <li class="descripcion">
            {{Observaciones}}
          </li>
        </div>
      </div>
    </div>
</body>
</html>

1
  • es un poco lioso para como tenia pensado hacerlo pero la verdad es que funciona perfectamente y a expensas de encontrar otra solucion mas simple lo he implementado! muchas gracias por ayudarme
    – KeTeMeTo
    el 30 jul. 2019 a las 10:05
1

Puedes hacerlo con Flexbox, algo como

#padre {
display:flex;
flex-wrap: wrap;
border: 1px solid #333;
justify-content: space-between;
padding: 0 10px;
}
<div id="padre">
  <span id="elemento1">Elemento 1</span>
  <span id="elemento2">Elemento 2</span>
</div>

3
  • muchas gracias por contestar voy a probarlo
    – KeTeMeTo
    el 30 jul. 2019 a las 7:09
  • 1
    ¿Cómo es que tu respuesta podría ayudar a resolver el problema? y si creo otros span con texto más largo o corto?
    – EMCode
    el 2 ago. 2019 a las 18:37
  • Si creas otro span, tomara la misma alineacion que los dos anteriores, pero afectaria el tamaño de los los primeros dos elemnto, sin embargo, flex tiene la solucion, y puedes asignarle el espacio que debe ocupar cada elemento por fila el 5 ago. 2019 a las 20:00

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.