首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >并排漂浮

并排漂浮
EN

Stack Overflow用户
提问于 2015-12-21 14:23:41
回答 7查看 57关注 0票数 0

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

下面是HTML:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
.right{
float: right;
}

.left{
float: left;
}

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

EN

回答 7

Stack Overflow用户

发布于 2015-12-21 14:36:08

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

代码语言:javascript
复制
  <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>
票数 0
EN

Stack Overflow用户

发布于 2015-12-21 14:37:21

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

HTML

代码语言:javascript
复制
<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

代码语言:javascript
复制
.col {
  width: 33.33%;
  float: left;
  box-sizing: border-box;
}

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

DEMO

票数 0
EN

Stack Overflow用户

发布于 2015-12-21 14:39:25

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

代码语言:javascript
复制
 table-cell 

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

代码语言:javascript
复制
.leftSec, .rightSec, .centerSec{display:table-cell;vertical-align:top;}
.centerSec{text-align:center;}
.leftSec img, .rightSec img{width:100%;}
代码语言:javascript
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34389989

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档