html - 并排漂浮

Question

我想响应式地并排 float 以下代码。我怎样才能做到这一点？

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

DEMO