Плавающий бок о бок

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> 

DEMO

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

Теперь создать три раздела и definedisplay свойство

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>

Answer 4

Использование Bootstrap для отзывчивым, как показано ниже работы на ваших изображений, так что они будут масштабироваться с разрешением вы можете ссылаться ниже код для ссылка

https://jsfiddle.net/gauravj/6totya08/5/

img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="col-xs-12"> 
 

 
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-6"> 
 
<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="col-md-4 col-lg-4 col-sm-4 col-xs-6"> 
 
<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 col-lg-4 col-sm-4 hidden-xs"> 
 
<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="col-xs-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 5

check this 

.row{float:left;width:100%;padding-bottom:20px;} 
 
.col-3{float:left;width:33.3%;padding:0 15px;box-sizing:border-box} 
 
.col-3 img{width:100%;height:auto}

<div class="row"><div class="col-3"><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-3"> 
 
<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-3"> 
 
<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> 
 
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!!!

Answer 6

.left{float:left} 
 
.right{float:right} 
 
.w33{width:33%} 
 
.w32{width:32%; margin: 0 1%} 
 
.clear{clear:both}

<div class="left w33"> 
 
<img src="http://www.iliveaccountable.com/wp-content/uploads/2015/12/free-membership-300x188.jpg" alt="free-membership" width="100%" class="alignnone size-medium wp-image-14074" /> 
 
</div> 
 
<div class="left w32"> 
 
<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="right w33"> 
 
<img src="http://www.iliveaccountable.com/wp-content/uploads/2015/12/satisfaction-guaranteed-300x300.png" alt="satisfaction-guaranteed" width="75%" class="alignnone size-medium wp-image-14075" /> 
 
</div> 
 

 
<div class="clear"> 
 
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 
 
</div>

Answer 7

Обновите HTML и CSS, как это.Check this fiddle в случае необходимости

HTML

<div class="container"> 
<div class="cols right-spacing"> 
<img class="img1" 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="cols right-spacing"> 
<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="cols"> 
    <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 class="paragraph"> 
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> 

CSS

.container { 
    width: 100%; 
} 

.cols { 
    width: 30%; 
    float: left; 
} 

.right-spacing { 
    margin-right: 5%; 
} 

img { 
    width: 100%; 
    height: auto; 
} 

.paragraph { 
    width: 100%; 
    float: left; 
}