it-swarm-es.tech

Colocando dos módulos uno al lado del otro

Estoy tratando de colocar estos dos módulos. 1

lado a lado. Están en la misma posición y en el orden adecuado. También he creado un nuevo sufijo de módulo para el ancho de los módulos. Aquí está el código:

 .box.color3 .content {
   clear: none!important;
   float: left;
   width: 50%;
}

.box.color3 .header {
   color: #0090BE;

}

.box.border.color3 {
clear: none!important;
   float: left;
   width: 50%;

}

Además, estoy ejecutando el sitio localmente, por lo que no pude proporcionar el enlace del sitio web.

1
TheAdnan

Si desea colocar dos módulos uno al lado del otro en una posición de módulo único, puede intentar lo siguiente:

  1. Publique cada uno de los dos módulos en posiciones personalizadas (por ejemplo, "myLeftModule" y "myRightModule").
  2. Agregue el siguiente CSS a su sitio para permitir un diseño de dos columnas (hay muchas maneras de lograr esto, este es solo un ejemplo):

    #wrap {
       width:100%;
       margin:0 auto;
    }
    #left_col {
        float:left;
       width:50%;
    }
    #right_col {
       float:right;
       width:50%;
    }
    
  3. Cree un nuevo módulo HTML personalizado y agregue el siguiente código para crear un diseño de dos columnas:

    <div id="wrap">
        <div id="left_col">
            {loadposition myLeftModule}
        </div>
        <div id="right_col">
            {loadposition myRightModule}
        </div>
    </div>
    

    Los {loadposition ...} tag cargará sus módulos desde las posiciones dadas, y deben alinearse muy bien uno al lado del otro.

  4. Antes de guardar su módulo, recuerde activar "Preparar contenido" en su módulo HTML personalizado para permitir el {loadposition} etiqueta para trabajar: Joomla module Prepare content

0
johanpw

Es difícil saberlo sin saber el html de la página. El CSS que proporcionó no significa nada en sí mismo.

Entonces, algunas cosas a considerar:

Incluso en el caso de que el CSS que creó sea adecuado para alinear a la izquierda 2 elementos, no significa que funcionaría en todas partes.

Puede ser que otras reglas css tengan prioridad sobre sus reglas, o que no esté aplicando sus reglas a las clases adecuadas, uso incorrecto de los selectores css.

Normalmente, necesitará flotar a la izquierda o mostrar en línea los 2 elementos de envoltura del contenido de sus módulos, que serán los elementos secundarios dentro del elemento de envoltura de la posición del módulo.

Además de la flotante, debe asegurarse de que sus anchos totales, incluidos los márgenes, los bordes y los rellenos, sean máximos del 100%.

Debe utilizar el inspector de su navegador para averiguar qué sucede con su marcado y CSS.

0
FFrewin

EDITAR

Para ampliar un buen punto por Lodder, esta no es una solución ideal si la biblioteca Bootstrap) no se está utilizando en otras facetas del sitio web.

Puede hacerlo fácilmente utilizando la biblioteca integrada bootstrap. Primero, en la parte superior del archivo PHP, cargue la biblioteca:

 JHtml::_('bootstrap.framework');

Luego convierte tu HTML así:

<div>
    <div class="pull-left">
        Content
    </div>
    <div class="pull-right">
         Content
    </div>
    <div class="clearfix"></div>
</div>

¡Cómo ayuda esto!

0
Brian Bolli