1. 首頁
  2. 問答
  3. 並排浮動

並排浮動

2015-12-21 59 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

相關問題

 相關問題