Question

我正在尝试让两个彼此相邻的课程相互接近。

以下是2个类的截图：

正确的班级是.testm_boxes1。左侧课程为.testm_boxes2

这是HTML和CSS：

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

Answer 1

每个测试框周围都有一个容器.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>

您需要将.testm_boxesX类移动到.vc_row容器。

<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>

这样两个容器可以彼此相邻。

CSS float:left和float:right会将内容推送到任意一方，但您必须为浮动项目设置宽度。

在CSS中将width: 50%;设置为.testm_boxes1和.testm_boxes2。

请参阅jsfiddle，将这些更改应用于您的代码： http://jsfiddle.net/r7yk8ao8/

Answer 2

您可以通过添加一个样式设置将两个元素放在一起，将每个元素的最大宽度限制为小于屏幕宽度的一半，如下所示：

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>

让两个班级彼此相邻

2 个答案: