1. 首页
  2. 问答
  3. 并排浮动

并排浮动

2015-12-21 41 views
0

我想响应地将下面的代码并排浮在一起。我怎样才能做到这一点？并排浮动

enter image description here

这里的是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/

来源

2015-12-21 Rodel Garcia

+0

你希望我们为你写的CSS？因为当我去那个小提琴时没有CSS。 – Sam

+0

轻松使用引导程序可以实现此目的。 –

+0

如何在JSFIDDLE上做到这一点？ –

回答

0

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

来源

2015-12-21 06:36:07

0

你需要用每个组的内容在一个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

来源

2015-12-21 06:37:21 shadeed9

0

现在创建三个部分和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>

来源

2015-12-21 06:39:24

0

使用引导为响应如下面图片上的工作，使他们扩展到你可以参考下面的代码的解析参考

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>

来源

2015-12-21 06:39:31 imGaurav

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

来源

2015-12-21 06:47:13 DFR

0 

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

来源

2015-12-21 06:47:24

0

更新您的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; 
}

来源

2015-12-21 06:49:46 Shuvro

相关问题

 相关问题