Question

我有两个div 1），图标2）带有与之相关的文字。我希望将它们排成一行。

<div class="col-lg-4">
                <h4>Stunning Layouts</h4>
                    <div class="one"><i class="fa fa-heart service_icon"></i></div>
                    <div class="one"><a class="service_para">A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers. </a></div>
            </div>

我的css就像

.service{
    background-color:#fff;
    padding:30px 100px;
}

.service_icon{
    color:#fff;
    background-color:#CE1E47;
    padding:20px;
    margin-right:10px;
    border-radius:50%;
}

.one{
    display:inline;
    height:100%;
}

但是如果我写了更多的文字，它会被写在图标下面。我希望他们两个并排分开，即使我写了100行文字。

我希望你明白吗？

Answer 1

display: table-cell就是您所需要的。

选中此fiddle

更新你的css -

.one{
    display:table-cell;
}

Answer 2

有几种方法，一种是使用定位和填充的方法：

http://codepen.io/anon/pen/RWGQyG

<div class="col-lg-4">
  <h4>Stunning Layouts</h4>
  <div class="icon-text">
    <i class="fa fa-heart service_icon"></i>
    <p>A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers. A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers</p>
  </div>  
</div>

.icon-text{
  position: relative;
  padding-left: 50px;
}

.service_icon{
   position: absolute;
   left: 0;
   color:#fff;
   background-color:#CE1E47;
   padding:20px;
   margin-right:10px;
   border-radius:50%;
}

Answer 3

添加此css。

.service_icon{
 color:#fff;
 background-color:#CE1E47;
 padding:20px;
 margin-right:10px;
 border-radius:50%;
 display: inline-block;
}

.one{
  display:inline;
  height:100%;
  float: left;
}

.one:first-child{
 width: 20%;
}
.one:last-child{width: 80%;}

你可以在这里测试http://jsfiddle.net/prakashlaxkar/z6m9zk8m/

如何对齐两个div内联？

3 个答案: