如何将这个div类放在右边?(HTML 5)

Question

基本上，我所做的是在线获得一些HTML代码，并复制粘贴我想出现在网页上的元素的代码。到目前为止，我很难将这些元素(见下面的截图(放在右边的空白处，这样它就会与文本并排。

屏幕截图

以下是编码在atm下的样子：

<div class="container margin-top">
<div class="history-wrapper">
<div class="col-md-6 wow fadeInUp" data-wow-duration="0.6s" data-wow-delay="0.5s">
<div class="row">
<article>
<h1>HISTORY OF AGENCY</h1>
<hr>
<h4>WHO LOVES OR PURSUES OR DESIRES TO OBTAIN PAIN OF ITSELF, BUT BECAUSE OCCASIONALLY CIRCUMSTANCES OCCUR AND PAIN CAN PROCURE HIM SOME GREAT PLEASURE</h4>
<p>
<br/>Porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi modi tempora incidunt ut labore.</p>
</article>
</div>
</div>
<div class="col-md-5 col-md-offset-1 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.3s">
</div>
</div>
<div class="row">
<article>
<div class="col-md-6">
<div class="tabs-wrapper">
<h1>CONCEPT OF CONSTRUCTION</h1>
<div class="tabs ef-tabs tabs-style-flip">
<nav>
<ul>
<li class="tab-current">
<a href="#section-flip-1">
<span class="tabs-icon icon-tools"></span>
<span class="tabs-title">PLAN OF WORK</span>
</a>
</li>
<li>
<a href="#section-flip-2">
<span class="tabs-icon icon-lightbulb"></span>
<span class="tabs-title">NEW IDEA</span>
</a>
</li>
<li>
<a href="#section-flip-3">
<span class="tabs-icon icon-paintbrush"></span>
<span class="tabs-title">INTERIOR</span>
</a>
</li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-flip-1" class="content-current">
<div class="col-md-12">
<div class="row">
<p>
Great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do.
</p>
</div>
</div>
</section>
<section id="section-flip-2">
<div class="col-md-12">
<div class="row">
<p>Magnam rerum neque distinctio non eaque soluta doloribus cumque cupiditate, corrupti mollitia sapiente dolores possimus laboriosam iste cum ipsam. Porro, in, quidem?</p>
</div>
</div>
</section>
<section id="section-flip-3">
<div class="col-md-12">
<div class="row">
<p>
Great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do.
</p>
</div>
</div>
</section>
</div>
<!-- /content-wrap -->
</div>
<!-- /tabs -->
</div>
<div class="tabs-image">
<div id="tabs-slider" class="owl-carousel">
<div><img src="img/tabs-slider/image_1.jpg" alt="architecure tabs"></div>
<div><img src="img/tabs-slider/image_2.jpg" alt="architecure tabs"></div>
<div><img src="img/tabs-slider/image_3.jpg" alt="architecure tabs"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

试试这样的。。。

您需要移动div.row来封装两个div.col-md-6

<div class="container margin-top">
<div class="row">
<div class="col-md-6 wow fadeInUp" data-wow-duration="0.6s" data-wow-delay="0.5s">
<article>
<div class="history-wrapper">
<h1>HISTORY OF AGENCY</h1>
<hr>
<h4>WHO LOVES OR PURSUES OR DESIRES TO OBTAIN PAIN OF ITSELF, BUT BECAUSE OCCASIONALLY CIRCUMSTANCES OCCUR AND PAIN CAN PROCURE HIM SOME GREAT PLEASURE</h4>
<p>
<br/>Porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi modi tempora incidunt ut labore.</p>
</div>
</article>
</div>
<div class="col-md-6">
<article>
<div class="tabs-wrapper">
<h1>CONCEPT OF CONSTRUCTION</h1>
<div class="tabs ef-tabs tabs-style-flip">
<nav>
<ul>
<li class="tab-current">
<a href="#section-flip-1">
<span class="tabs-icon icon-tools"></span>
<span class="tabs-title">PLAN OF WORK</span>
</a>
</li>
<li>
<a href="#section-flip-2">
<span class="tabs-icon icon-lightbulb"></span>
<span class="tabs-title">NEW IDEA</span>
</a>
</li>
<li>
<a href="#section-flip-3">
<span class="tabs-icon icon-paintbrush"></span>
<span class="tabs-title">INTERIOR</span>
</a>
</li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-flip-1" class="content-current">
<div class="col-md-12">
<div class="row">
<p>
Great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do.
</p>
</div>
</div>
</section>
<section id="section-flip-2">
<div class="col-md-12">
<div class="row">
<p>Magnam rerum neque distinctio non eaque soluta doloribus cumque cupiditate, corrupti mollitia sapiente dolores possimus laboriosam iste cum ipsam. Porro, in, quidem?</p>
</div>
</div>
</section>
<section id="section-flip-3">
<div class="col-md-12">
<div class="row">
<p>
Great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do.
</p>
</div>
</div>
</section>
</div>
<!-- /content-wrap -->
</div>
<!-- /tabs -->
</div>
<div class="tabs-image">
<div id="tabs-slider" class="owl-carousel">
<div><img src="img/tabs-slider/image_1.jpg" alt="architecure tabs"></div>
<div><img src="img/tabs-slider/image_2.jpg" alt="architecure tabs"></div>
<div><img src="img/tabs-slider/image_3.jpg" alt="architecure tabs"></div>
</div>
</div>
</div>
</article>
</div>
</div>