Question

我有以下Html和CSS Fiddle Example：

<div>
   <i class="fa fa-yelp"></i>
   <h2>Help</h2>
   <p>This is some text which I want to be on the right side of span</p>
</div>

div {width: 200px;}
i {
  font-size: 48px!important;
  float: left;
}
h2 {float: left;}
p {float: left;}

我需要将h2和p放在i标签右侧的同一列上。

我正在使用花车，但没有运气。没有桌子怎么办呢？

Answer 1

你是否厌倦了给段落保证金？

 p {float: left;
 margin-left:20px;
  margin-top:0px}

Answer 2

**更新** 小提琴：http://jsfiddle.net/847ndaap/13/

在这个例子中，我只浮动左边的div，让右边的div落到位，但是给它一个与左浮动div（48px）大小相匹配的填充。奇迹般有效。我也使用min / max-width来允许响应位工作。

新CSS：

.main{
    max-width: 200px;
    overflow: hidden;
}
.left{
    float: left;
    width: 48px;
}
.left i{
    font-size: 48px!important;
}
.right{
    padding-left: 48px;
    max-width: 152px;
}

-

<强> OLD：

所以你需要做的就是给自己一个容器来保存内在的浮动内容。然后在里面使用2个div，一个左右。左侧将包含您的图标，右侧将包含您的内容。如果你不包含浮动巢 - 你还需要指定每一侧的宽度，所以不要忘记。您需要在主容器上使用clearfix - 在此示例中，我使用的是基本的溢出隐藏修复程序。

小提琴： http://jsfiddle.net/847ndaap/10/

新HTML：

<div class="main">
    <div class="left">
        <i class="fa fa-yelp"></i>
    </div>
    <div class="right">
        <h2>Help</h2>
        <p>This is some text which I want to be on the right side of span</p>
    </div>
</div>

新CSS：

.main{
    width: 200px;
    overflow: hidden;
}
.left{
    float: left;
    width: 48px;
}
.left i{
    font-size: 48px!important;
}
.right{
    width: 152px;
    float: left;
}

对齐I右侧的H2和P.

2 个答案: