Estoy tratando de tener 2 divs en la misma fila, uno con un título y un <hr> y el otro con una imagen en la que se puede hacer clic para ir a otra página (incluso si elimino el enlace, el problema persiste) . Mis expectativas serían que al ejecutar este código obtendría el primero comenzando en la esquina superior izquierda seguido de la imagen a la derecha, pero en su lugar, el primer <div> simplemente comienza de forma aleatoria.

#zonaTitlu {
  width: 300px;
  height: 200px;
  display: inline-block;
  background-color: red;
}

#zonaImagine {
  width: 400px;
  height: 400px;
  display: inline-block;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}
<body style="background-color:LightGray">
  <div id="zonaTitlu">
    <p>
      <h3>Welcome to LOL Tournaments</h3>
    </p>
    <hr class="LinieTitlu">
  </div>
  <div id="zonaImagine">
    <a href="https://eune.leagueoflegends.com/ro/">
      <img class="logo" src="lol-logo.jpg" alt="LOL logo">
    </a>
  </div>
</body>
0
Alin Catalin Preda 25 oct. 2019 a las 22:58

5 respuestas

La mejor respuesta

Si quiere ambos div lado a lado, intente esto y cambie el ancho de la imagen al 100%

.zona{
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#zonaTitlu {
  width: 50%;
  height: 200px;
  display: inline-block;
  background-color: red;
}

#zonaImagine {
  width: 50%;
  height: 400px;
  display: inline-block;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}
<body style="background-color:LightGray">
<div class="zona">
  <div id="zonaTitlu">
      <h3>Welcome to LOL Tournaments</h3>
    <hr class="LinieTitlu">
  </div>
  <div id="zonaImagine">
    <a href="https://eune.leagueoflegends.com/ro/">
      <img class="logo" src="lol-logo.jpg" alt="LOL logo">
    </a>
  </div>
  </div>
</body>
1
Fussionweb 25 oct. 2019 a las 20:19

Aquí hay un ejemplo de trabajo usando flex-box

<body style="background-color:LightGray">
    <div id="container">
        <div id="zonaTitlu" class="box">
            <p>
                <h3>Welcome to LOL Tournaments</h3>
            </p>
            <hr class="LinieTitlu">
        </div>
        <div id="zonaImagine" class="box">
            <a href="https://eune.leagueoflegends.com/ro/">
                <img class="logo" src="lol-logo.jpg" alt="LOL logo">
            </a>
        </div>
    </div>
</body>

<style>


/*
#zonaTitlu {
  width: 300px;
  height: 200px;
  display: inline-block;
  background-color: red;
}

#zonaImagine {
  width: 400px;
  height: 400px;
  display: inline-block;
}
*/

#container {
    display: flex;
    flex-direction: row;
}

.box {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}

</style>
0
sao 25 oct. 2019 a las 20:32

Si bien me gustan las otras soluciones (especialmente flexbox). OP parece tener un problema simple que solucionar: la alineación de bloque en línea predeterminada a la línea de base (abajo) y el contenido dentro del primer div es lo que se está alineando con la parte inferior de la imagen. Verá que la hora está alineada con la parte inferior de la imagen.

Añadiendo vertical-align: top; en cualquiera de los elementos de bloque en línea corrige esto y se alinearán en la parte superior. Aquí hay una buena publicación SO sobre todo el comportamiento anterior: Mis elementos de bloque en línea no se alinean correctamente

No sé qué está tratando de hacer con anchos fijos, así que no voy a ofrecer otras soluciones con un diseño receptivo y otras cosas: esta es la respuesta directa a su pregunta.

#zonaTitlu {
  width: 200px;
  height: 200px;
  display: inline-block;
  background-color: red;
  vertical-align: top; // added this
}

#zonaImagine {
  width: 140px;
  height: 100px;
  display: inline-block;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}
<body style="background-color:LightGray">
  <div id="zonaTitlu">
    <p>
      <h3>Welcome to LOL Tournaments</h3>
    </p>
    <hr class="LinieTitlu">
  </div>
  <div id="zonaImagine">
    <a href="https://via.placeholder.com/350x150">
      <img class="logo" src="https://via.placeholder.com/140x100" alt="LOL logo">
    </a>
  </div>
1
MrRobboto 26 oct. 2019 a las 15:34

Ahora puede ajustar todas las cosas por separado. TH HR está un poco desactualizado. También forzará un salto de línea. Agrego un subrayado al h3 que haría lo mismo. Pero para completar, agrego también un HR que ahora se puede colocar también individualmente por css. Lo mismo para la imagen. - Depende un poco del tamaño de la imagen, cómo hacer los ajustes.

            <!DOCTYPE html>
            <html>

                <head>
                    <title>Untitled</title>
                    <style>
                        #zonaTitlu {
                            width: 400px;
                            height: 200px;
                            display: inline-block;
                            background-color: red;
                            display: inline-block;
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            z-index: -1;
                        }

                        #zonaImagine {
                            width: 400px;
                            height: 400px;
                            display: inline-block;

                        }

                        .LinieTitlu {
                            display: block;
                            margin-top: 0.5em;
                            margin-bottom: 0.5em;
                            margin-left: auto;
                            margin-right: 50px;
                            border-style: inset;
                            border-width: 2px;
                            border-color: darkgrey;
                        }

                        .underlined {
                            text-decoration: underline;
                        }

                        .logo {
                            position: relative;
                            width: 400px;
                            height: auto;
                            top: 5px;

                        }

                        .spacer {
                            display: inline-block;
                            width: 30px;
                        }

                        .hr {
                            position: relative;
                            top: 60px;
                            width: 400px;
                            left: 0px"

                        }

                        .para {
                            position: relative;
                            width: 380px;
                            top: 15px;
                        }
                    </style>
                    <style type="text/css">
                        body.c1 {
                            background-color: LightGray
                        }
                    </style>
                </head>

                <body class="c1">
                    <h3 class="underlined">Welcome to LOL Tournaments <a class="logo" href="https://eune.leagueoflegends.com/ro/"><img class="logo" src="lol-logo.jpg" alt="LOL logo"></a></h3>
                    <div id="zonaTitlu">
                        <hr class="hr">
                    </div>
                    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu autem, si
                    tibi illa probabantur, cur non propriis verbis ea tenebas? Mihi enim satis est, ipsis non satis. <i>Eiuro,
                     inquit adridens, iniquum, hac quidem de re;</i> Duo Reges: constructio interrete.</p>
                </body>

            </html>
0
Thomas Ludewig 25 oct. 2019 a las 20:34

Me parece bien. Puede intentar usar una tabla si es necesario. El div se puede eliminar

-1
lajit nambiar 25 oct. 2019 a las 20:22