并排漂浮

Question

我想让下面的代码相互响应地并排浮动。我该怎么做呢？

​

​

下面是HTML：

<img src="http://www.iliveaccountable.com/wp-content/uploads/2015/12/free-membership-300x188.jpg" alt="free-membership" width="300" height="188" class="alignnone size-medium wp-image-14074" /> 

<h3>Today’s Price: 100% FREE</h3>
<p><strong>ONLINE VIDEO COURSE</strong></p>
<p><strong>Availability</strong>: Immediate Access in Members Area</p>
<button class="btn btn-primary">GET ACCESS NOW</button>

<img src="http://www.iliveaccountable.com/wp-content/uploads/2015/12/satisfaction-guaranteed-300x300.png" alt="satisfaction-guaranteed" width="300" height="300" class="alignnone size-medium wp-image-14075" />


You can get started right now, in this moment, to shift your life to a more powerful, more accountable life! We offer a free video series that shares insights into the mindset of a victim, the characteristics and verbiage victims unknowingly use, and some steps and tools to live a more accountable life! 

We also clarify some of the misconceptions of accountability and why it is that for many, accountability is something that is avoided, when in truth, it is the key to a more free, powerful fulfilling life!!!

下面是CSS：

.right{
float: right;
}

.left{
float: left;
}

这是jSFIDDLE：https://jsfiddle.net/6totya08/

Answer 1

使用bootstrap，您可以很容易地实现这种响应式设计。

  <div class="row">
   <div class="col-md-4">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/2015/12/free-membership-300x188.jpg" alt="free-membership" width="300" height="188" class="alignnone size-medium wp-image-14074" /> 
   </div>
   <div class="col-md-4">
     <h3>Today’s Price: 100% FREE</h3>
     <p><strong>ONLINE VIDEO COURSE</strong></p>
     <p><strong>Availability</strong>: Immediate Access in Members Area</p>
     <button class="btn btn-primary">GET ACCESS NOW</button>
   </div>
   <div class="col-md-4">
     <img src="http://www.iliveaccountable.com/wp-content/uploads/2015/12/satisfaction-guaranteed-300x300.png" alt="satisfaction-guaranteed" width="300" height="300" class="alignnone size-medium wp-image-14075" />
   </div>

 </div>
 <div class="row">
    <div class="col-md-12">
        You can get started right now, in this moment, to shift your life to a more powerful, more accountable life! We offer a free video series that shares insights into the mindset of a victim, the characteristics and verbiage victims unknowingly use, and some steps and tools to live a more accountable life! 
       We also clarify some of the misconceptions of accountability and why it is that for many, accountability is something that is avoided, when in truth, it is the key to a more free, powerful fulfilling life!!!
   </div>
 </div>

Answer 2

您需要将每组内容包装在一个div中，我们称其为col。然后，您需要为每个值指定宽度和浮点数。

HTML

<div class="wrapper">
   <div class="col">
      // your content here
   </div>
   <div class="col">
      // your content here
   </div>
   <div class="col">
      // your content here
   </div>
</div>

CSS

.col {
  width: 33.33%;
  float: left;
  box-sizing: border-box;
}

.col img {
  max-width: 100%;
}

DEMO

Answer 3

现在创建三个部分的和define display属性

 table-cell 

HI现在更改您的html和css，如下所示

​

.leftSec, .rightSec, .centerSec{display:table-cell;vertical-align:top;}
.centerSec{text-align:center;}
.leftSec img, .rightSec img{width:100%;}

<div class="leftSec">
<img src="http://www.iliveaccountable.com/wp-content/uploads/2015/12/free-membership-300x188.jpg" alt="free-membership" class=" alignnone size-medium wp-image-14074" /> 
</div>
<div class="centerSec">
<h3>Today’s Price: 100% FREE</h3>
<p><strong>ONLINE VIDO COURSE</strong></p>
<p><strong>Availability</strong>: Immediate Access in Members Area</p>
<button class="btn btn-primary">GET ACCESS NOW</button>

</div>

<div class="rightSec">
<img src="http://www.iliveaccountable.com/wp-content/uploads/2015/12/satisfaction-guaranteed-300x300.png" alt="satisfaction-guaranteed" class=" alignnone size-medium wp-image-14075" />

</div>

<div class="container">


You can get started right now, in this moment, to shift your life to a more powerful, more accountable life! We offer a free video series that shares insights into the mindset of a victim, the characteristics and verbiage victims unknowingly use, and some steps and tools to live a more accountable life! 

We also clarify some of the misconceptions of accountability and why it is that for many, accountability is something that is avoided, when in truth, it is the key to a more free, powerful fulfilling life!!!

<div>

​