web-dev-qa-db-ja.com

2つのモジュールを並べて配置する

これら2つのモジュールを配置しようとしています 1

並んで。それらは同じ位置にあり、適切な順序になっています。また、モジュールの幅に対応する新しいモジュールサフィックスを作成しました。これがコードです：

 .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%;

}

また、私はサイトをローカルで実行しているため、ウェブサイトのリンクを提供できませんでした。

moduleoverridescsstemplate-overridemodule-display
1
TheAdnan

1つのモジュール位置内に2つのモジュールを並べて配置する場合は、次のことを試してください。

  1. 2つのモジュールのそれぞれをカスタム位置に公開します（「myLeftModule」と「myRightModule」など）。

  2. 次のCSSをサイトに追加して、2列のレイアウトを可能にします（これを実現するには多くの方法があり、これは単なる例です）。

    #wrap {
   width:100%;
   margin:0 auto;
}
#left_col {
    float:left;
   width:50%;
}
#right_col {
   float:right;
   width:50%;
}

  3. 新しいカスタムHTMLモジュールを作成し、次のコードを追加して2列のレイアウトを作成します。

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

    {loadposition ...}タグは、指定された位置からモジュールをロードし、並べて配置する必要があります。

  4. モジュールを保存する前に、カスタムHTMLモジュールで{loadposition}機能するタグ： Joomla module Prepare content

0
johanpw

ページのhtmlがわからないので、わかりにくいです。指定したcssは、それ自体では何も意味しません。

考慮すべきいくつかのこと：

作成したcssが2つの要素を左揃えにするのに適している場合でも、どこでも機能するわけではありません。

他のcssルールがルールよりも優先されているか、ルールを適切なクラスに適用していない可能性があります-cssセレクターの誤った使用。

通常、モジュール位置のwrapper-element内の子要素となる、モジュールのコンテンツの2つのwrapper要素をfloat-leftまたはdisplay-inlineする必要があります。

フローティングとは別に、マージン、ボーダー、パディングを含むそれらの合計幅が最大100％であることを確認する必要があります。

マークアップとCSSで何が行われているのかを確認するには、ブラウザーのインスペクターを使用する必要があります。

0
FFrewin

編集

BootstrapライブラリがWebサイトの他の面でまだ使用されていない場合、Lodderによる良い点を拡張するために、これは理想的なソリューションではありません。

これは、組み込みのbootstrapライブラリを使用して簡単に行うことができます。まず、PHPファイルの上部で、ライブラリをロードします。

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

次に、HTMLを次のように変更します。

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

これはどのように役立ちますか？

0
Brian Bolli