隣り合わせに2つのクラスを取得する

-2

お互いの隣にある2つのクラスを取得しようとしています。ここで隣り合わせに2つのクラスを取得する

は、2クラスのスクリーンショットです：

右のクラスが.testm_boxes1です。左のクラスは、ここで.testm_boxes2

であるHTMLとCSSです：あなたは、各要素の最大値を制限一つのスタイルの設定を追加することによって、お互いの隣に2つの要素を配置することができます

.testm_boxes1 { 
 
    text-align: center; 
 
    float: right !important; 
 
} 
 

 
.testm_boxes2 { 
 
    text-align: center; 
 
    float: left !important; 
 
}

<div class="wpb_wrapper"> 
 
    <h3 style="font-size: 30px;text-align: center;font-family:Roboto;font-weight:700;font-style:normal" class="vc_custom_heading vc_custom_1509530836762">Wat zeggen anderen?</h3> 
 
    <div class="vc_row wpb_row vc_inner vc_row-fluid"> 
 
    <div class="testm_boxes1 wpb_column vc_column_container vc_col-sm-6"> 
 
     <div class="vc_column-inner "> 
 
     <div class="wpb_wrapper"> 
 
      <div class="ult-just-icon-wrapper "> 
 
      <div class="align-icon" style="text-align:center;"> 
 
       <div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;"> 
 
       <i class="Defaults-quote-left"></i> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="wpb_text_column wpb_content_element "> 
 
      <div class="wpb_wrapper"> 
 
       <div id="Content"> 
 
       <div class="boxed"> 
 
        <div id="lipsum"> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p> 
 
        <blockquote> 
 
         <p> 
 
         <em>-John Doe</em> 
 
         </p> 
 
        </blockquote> 
 
        </div> 
 
       </div> 
 
       </div> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="vc_row wpb_row vc_inner vc_row-fluid"> 
 
    <div class="testm_boxes2 wpb_column vc_column_container vc_col-sm-6"> 
 
     <div class="vc_column-inner "> 
 
     <div class="wpb_wrapper"> 
 
      <div class="ult-just-icon-wrapper "> 
 
      <div class="align-icon" style="text-align:center;"> 
 
       <div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;"> 
 
       <i class="Defaults-quote-left"></i> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="wpb_text_column wpb_content_element "> 
 
      <div class="wpb_wrapper"> 
 
       <div id="Content"> 
 
       <div class="boxed"> 
 
        <div id="lipsum"> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p> 
 
        <blockquote> 
 
         <p> 
 
         <em>-John Doe</em> 
 
         </p> 
 
        </blockquote> 
 
        </div> 
 
       </div> 
 
       </div> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-11-01 MultiDutch

あなたが実際に**コードスニペットでは、あなたの問題を再現できる方法であなたのマークアップとスタイルを投稿してください**。残念ながら、スクリーンショットだけに基づいてマークアップを推論することはできません。 – Terry

HTMLの外観はどうですか？ CSSと同じくらい重要です。 – rblarsen

@Terry投稿を追加しました。 HTMLがそこにあります。 – MultiDutch

あなたのTESTMボックスの周囲の容器.vc_rowを持っています。

<div class="wpb_wrapper"> 
    <div class="vc_row other_classes"> 
    <div class="testm_boxes1 other_classes"> 
     content 
    </div> 
    </div> 
    <div class="vc_row other_classes"> 
    <div class="testm_boxes2 other_classes"> 
     content 
    </div> 
    </div> 
</div>

あなたは.vc_rowコンテナに.testm_boxesXクラスを移動する必要があります。

<div class="wpb_wrapper"> 
    <div class="vc_row testm_boxes1 other_classes"> 
    <div class="other_classes"> 
     content 
    </div> 
    </div> 
    <div class="vc_row testm_boxes2 other_classes"> 
    <div class="other_classes"> 
     content 
    </div> 
    </div> 
</div>

このようにして、2つのコンテナはお互いに隣に座ることができます。

CSS float:leftおよびfloat:rightはコンテンツをいずれかの側にプッシュしますが、浮動アイテムの幅を設定する必要があります。

CSSのwidth: 50%;を.testm_boxes1と.testm_boxes2に設定してください。

はあなたのコードに適用され、これらの変更とjsfiddleを参照してください： http://jsfiddle.net/r7yk8ao8/

出典

2017-11-01 15:32:46 Markie

幅は画面の幅の半分以下になります。

max-width: 49%;

実際の例です：

.testm_boxes1 { 
 
    text-align: center; 
 
    float: right !important; 
 
    max-width: 49%; 
 
} 
 

 
.testm_boxes2 { 
 
    text-align: center; 
 
    float: left !important; 
 
    max-width: 49%; 
 
}

<div class="wpb_wrapper"> 
 
    <h3 style="font-size: 30px;text-align: center;font-family:Roboto;font-weight:700;font-style:normal" class="vc_custom_heading vc_custom_1509530836762">Wat zeggen anderen?</h3> 
 
    <div class="vc_row wpb_row vc_inner vc_row-fluid"> 
 
    <div class="testm_boxes1 wpb_column vc_column_container vc_col-sm-6"> 
 
     <div class="vc_column-inner "> 
 
     <div class="wpb_wrapper"> 
 
      <div class="ult-just-icon-wrapper "> 
 
      <div class="align-icon" style="text-align:center;"> 
 
       <div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;"> 
 
       <i class="Defaults-quote-left"></i> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="wpb_text_column wpb_content_element "> 
 
      <div class="wpb_wrapper"> 
 
       <div id="Content"> 
 
       <div class="boxed"> 
 
        <div id="lipsum"> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p> 
 
        <blockquote> 
 
         <p> 
 
         <em>-John Doe</em> 
 
         </p> 
 
        </blockquote> 
 
        </div> 
 
       </div> 
 
       </div> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="vc_row wpb_row vc_inner vc_row-fluid"> 
 
    <div class="testm_boxes2 wpb_column vc_column_container vc_col-sm-6"> 
 
     <div class="vc_column-inner "> 
 
     <div class="wpb_wrapper"> 
 
      <div class="ult-just-icon-wrapper "> 
 
      <div class="align-icon" style="text-align:center;"> 
 
       <div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;"> 
 
       <i class="Defaults-quote-left"></i> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="wpb_text_column wpb_content_element "> 
 
      <div class="wpb_wrapper"> 
 
       <div id="Content"> 
 
       <div class="boxed"> 
 
        <div id="lipsum"> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p> 
 
        <blockquote> 
 
         <p> 
 
         <em>-John Doe</em> 
 
         </p> 
 
        </blockquote> 
 
        </div> 
 
       </div> 
 
       </div> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-11-01 15:25:28 freginold

フレックスボックスを使ってみましたが、フレックスボックスを使ってみましたが、どちらもうまくいきませんでした。 – MultiDutch

投稿したコードに反映されていないクラスには余白がありますか？ – freginold

隣り合わせに2つのクラスを取得する

答えて

関連する問題