如何对齐两个div内联?

时间:2015-09-24 10:37:04

标签: html css

我有两个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行文字。

我希望你明白吗?

3 个答案:

答案 0 :(得分:1)

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

选中此fiddle

更新你的css -

.one{
    display:table-cell;
}

答案 1 :(得分:0)

有几种方法,一种是使用定位和填充的方法:

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%;
}

答案 2 :(得分:0)

添加此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/