Quiero saber cómo colocar dos tramos uno al lado del otro, y luego un tramo en la parte superior ya la izquierda. Algo así como a continuación, donde cada precio es un lapso. Soy absolutamente terrible en CSS, por lo que agradecería cualquier ayuda, gracias.
$1.15 $2.00 $3.00Actualmente tengo el siguiente HTML pero tiene todo al lado del otro.
<span id="top-left" class="is-text-align-right">$1.15</span> <span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span> <span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>#top-left {display: block} or span.is-text-align-right:fisrt-child(display:block) #top-left {display: block;} <span id="top-left" class="is-text-align-right">$1.15</span> <span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span> <span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>Esta es una pequeña solución usando flexbox . Usaré un envoltorio para el contenedor flexbox, luego los tramos se convirtieron en elementos flexibles y se pueden trazar como quieras.
.wrapper{ display:flex; width:200px;/*not necessary*/ flex-wrap:wrap; } #top-left{ flex: 0 1 100%; } #bottom-left, #bottom-right{ flex: 0 1 50%; } <div class="wrapper"> <span id="top-left" class="is-text-align-right">$1.15</span> <span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span> <span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span> </div>agregue el siguiente css a su código
#top-left::after{ content: "\a"; white-space: pre; } <span id="top-left" class="is-text-align-right">$1.15</span> <span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span> <span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>si requería espacio entre el 2 y el 3er vano. también puede agregar este CSS.
#bottom-right { margin-left: 20px; }