CSS - inline block

Pos: 302

Val: 1

inline block

Publicado por Daniele (2 intervenciones) el 01/04/2020 19:54:45

Hola a todos,
he empezado hace poco el estudio de HTML y CSS y aun estoy en un nivel basico.

Tengo un problema con unas lineas de ejemplo que he creado para aprender un poco la propiedad display.

El objetivo parecía muy sencillo jajajaja
Quería poner 2 párrafos uno al lado de otro usando la propiedad display, pero no he sido capaz.

Que es lo que hago mal?

Adjunto zip con los 2 archivos html y css.

Gracias

Archivo-comprimido.zip(1,7 KB)

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 870

inline block

Publicado por joel (252 intervenciones) el 01/04/2020 20:59:58

Hola Daniele, para ello, tienes que utilizar un contenedor que tenga el display:flex... algo así:

<!DOCTYPE html>

<html>

    <head>

        <title>Ejemplos</title>

        <style>

.wrapper {

    display:flex;

p {

	margin: 5px;

	padding: 5px;

	background-color: lightgreen;

	width: 50%;

        </style>

    </head>

    <body>

        <div class="wrapper">

            <p>Nunc pellentesque aliquet nunc, quis ultricies est. Ut velit mi, viverra at quam sit amet, dictum tempor leo. Nullam quis magna faucibus, posuere lorem eu, ullamcorper sapien. Cras suscipit molestie cursus. Donec posuere mi auctor est ultrices interdum. Nullam ultrices, metus quis fermentum sagittis, tellus arcu tempor mi, viverra iaculis ante nunc rhoncus nulla. Mauris lacinia lacus arcu, sit amet sagittis mauris cursus a. Phasellus pharetra velit ut velit dapibus placerat. Nunc tristique purus quis dolor elementum, convallis elementum metus dictum. Suspendisse mattis metus ex, at euismod augue ultricies a.</p>

            <p>Proin maximus leo blandit leo gravida, a condimentum mauris porta. Aliquam non dignissim sapien. Sed posuere, lacus et auctor ornare, massa est suscipit nisi, quis vehicula ipsum dui non est. Sed nisl turpis, hendrerit ac fringilla vel, consectetur non arcu. Fusce euismod laoreet tincidunt. Maecenas eu enim libero. Duis congue tempus odio in interdum. Maecenas dictum libero quis arcu placerat, at dictum nisl semper. Sed condimentum commodo erat vitae consectetur.</p>

        </div>

    </body>

</html>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

inline block

Publicado por Daniele (1 intervención) el 02/04/2020 18:25:57

Muchisimas Gracias Joel :)

No solo me has resuelto el problema, sino que me has enseñado una cosa muy muy util.

No se porque pero Flex entre las opciones de mi libo no aparece, y a mi aviso es la mas util de todas jajajaj

Ciao

Valora esta respuesta

Comentar

Pos: 1

Val: 870

inline block

Publicado por joel (252 intervenciones) el 02/04/2020 21:35:39

Si, si, creo que es una de las nuevas opciones de CSS3...

Valora esta respuesta

Comentar

inline block

Publicado por Daniele (2 intervenciones) el 03/04/2020 20:11:56

Hola Joel,

Perdona tengo otra pregunta en parte relacionada con este tema y en parte con el tag <object> que estoy aprendiendo.
Dentro del tag object no consigo poner un buscador. He intentado con google y yahoo pero ninguno de los 2 funcionan.
Sin embargo otras paginas si que las consigo escribir bien.
mira en el ejemplo que te pongo si cambio uno de los links dentro de object por el link de google ya no funciona. Estan protegidos o algo?

<!DOCTYPE html>

<html>

    <head>

        <title>Ejemplos</title>

        <style type="text/css">

		#container {

			display: flex;

			height: 100vh;

			width: 100vw;

			margin: 5px auto;

		object {

			flex:1;

		</style>

    </head>

    <body>

     <div id="container">

      <object data="https://gallery.farmadati.it/" type="text/html"></object>

      <object data="http://www.mejortorrentt.org/" type="text/html"></object>

      </div>

    </body>

</html>

Valora esta respuesta

Comentar

Ayuda modificación con CSS

Problema con background-color