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
    – user128299
    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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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