2

¿Saben cómo puedo hacer para que mi resultado se vea como el de la imagen? en referencia para que la imagen y el texto queden en la misma línea y agregar las líneas de división.

Intente usar el float y flexbox para mover y alinear y usé hr para las líneas de división punteada, también estoy usando variables en SCSS y anidamiento / nesting.

Adjunto mi código:

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Merriweather|Josefin+Slab|Oswald|Bree+Serif);
$offwhite : #EEE8D6;
$darkblue : #022933;
$title : #0e6dc8;
$color-main: $darkblue;
$color-backgrounds: $offwhite;
$color-headlines: $red;
$font-main: 'Merriweather',
Helvetica,
sans-serif;
$font-highlight: 'Bree Serif',
Helvetica,
sans-serif;
html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  font-family: $font-main;
  color: $color-main;
  background-color: $color-backgrounds;
}

.container {
  width: 80%;
  margin: 0 auto;
}

h1 {
  font-family: $font-highlight;
  color: $color-headlines;
}

#media {
  h2 {
    color: $title;
  }
  p {
    color: $darkblue;
    text-align: justify;
  }
  a {
    text-decoration: none;
  }
  li {
    list-style-type: none;
  }
}

img {}
<body>
  <section id="media">
    <div class="container">
      <h1>Medios</h1>
      <ol class="media">
        <li class="item">
          <a href="#">
            <img src="https://assets.codepen.io/3434869/90x90.png" alt="thumbnail">
            <h2 class="titulo">Título 1</h2>
            <p>Atque suscipit, neque quisquam laboriosam enim officiis, nam nemo cupiditate ipsam eveniet id eaque optio facere! Maxime accusamus repellendus nisi veniam saepe explicabo, voluptatum quod obcaecati, possimus quis expedita? Dignissimos.</p>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <img src="https://assets.codepen.io/3434869/90x90.png" alt="thumbnail">
            <h2 class="titulo">Título 2</h2>
            <p>Magnam repellat laudantium, aspernatur fugiat quam deleniti atque in voluptas, aliquam corporis, amet temporibus modi! Exercitationem voluptates quisquam, enim eos autem quidem expedita quod, quasi eum deleniti neque nostrum possimus.</p>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <img src="https://assets.codepen.io/3434869/90x90.png" alt="thumbnail">
            <h2 class="titulo">Título 3</h2>
            <p>Ea obcaecati a deleniti autem. Nihil minima, laudantium voluptas quod inventore iure, beatae quis aspernatur culpa qui minus esse harum odit soluta! Quaerat magnam asperiores repellendus voluptas similique est excepturi.</p>
          </a>
        </li>
      </ol>
    </div>
  </section>
</body>

1 respuesta 1

1

Una opinión muy personal, para mí el uso de <li> es incorrecto. Este es un elemento que representa listas (Ordenadas o no), es un componente tal como lo puede ser un input. Se que hay muchos que estiran la definición, insistiendo en que un menú es una lista de enlaces, que un carrusel es una lista de imágenes, etc. Pero para mí es esto

  • item1
  • item2
  • item3

Es una lista de texto

Así que yo usaré <div> de toda la vida, y me ahorro sobre escribir las reglas que ya tiene establecido el navegador para los <ul>, <ol> y <li>

Luego para tienes que pensar lo siguiente:

introducir la descripción de la imagen aquí

Tú tienes una lista de elementos, cada elemento es un ítem (lo marcado en azul), la lista puedes usar un flex ordenado como columna, así muestras cada ítem hacia abajo. Luego, dentro del ítem puedes usar un grid para ubicar los elementos izquierda y derecha.

body{
 background-color: #f2f2ce;
}
.media {
  display:flex;
  flex-direction: column;
}
.media > .item{
  width:100%;
  display:grid;
  grid-template-columns: 90px 1fr;
   gap: 11px;
   align-items: center;
   border-top: 2px dotted red;
   padding:6px 0;
}

.media > .item  h2{
  margin:1px;
}
.media > .item h2,.media > .item p {
    margin: 6px 0;
}
<body>
  <section id="media">
    <div class="container">
      <h1>Medios</h1>
      
      <div class="media">
      
        <a href="#" class="item">
            <img src="https://assets.codepen.io/3434869/90x90.png" alt="thumbnail">
            
            <div>
              <h2 class="titulo">Título 1</h2>
              <p>Atque suscipit, neque quisquam laboriosam enim officiis, nam nemo cupiditate ipsam eveniet id eaque optio facere! Maxime accusamus repellendus nisi veniam saepe explicabo, voluptatum quod obcaecati, possimus quis expedita? Dignissimos.</p>
            </div>

       </a>

        <a href="#" class="item">
            <img src="https://assets.codepen.io/3434869/90x90.png" alt="thumbnail">
            <div>
              <h2 class="titulo">Título 1</h2>
              <p>Atque suscipit, neque quisquam laboriosam enim officiis, nam nemo cupiditate ipsam eveniet id eaque optio facere! Maxime accusamus repellendus nisi veniam saepe explicabo, voluptatum quod obcaecati, possimus quis expedita? Dignissimos.</p>
            </div>
        </a>
        <a href="#" class="item">
            <img src="https://assets.codepen.io/3434869/90x90.png" alt="thumbnail">
            <div>
              <h2 class="titulo">Título 1</h2>
              <p>Atque suscipit, neque quisquam laboriosam enim officiis, nam nemo cupiditate ipsam eveniet id eaque optio facere! Maxime accusamus repellendus nisi veniam saepe explicabo, voluptatum quod obcaecati, possimus quis expedita? Dignissimos.</p>
            </div>
        </a>
      </div>
    </div>
  </section>
</body>

1
  • ya entiendo mejor, muchas gracias :)
    – 707
    Commented el 16 feb. 2023 a las 5:38

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.