使用内嵌文本定位图像

Question

请看下面的图片

功能1和功能4是我在bootstrap类.col-md-4中有两个不同的div

以下是html代码

<div class="col-md-4">
    <div class="feature-group-1">
        <div class="feature-1">
            <div class="feature-1-img">
                <img src="images/cloud.png"/>
            </div>
            <div class="feature-1-writing"> 
                <h4>Feature 1</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
            </div>  
        </div>
        <div class="feature-2">
            <div class="feature-2-img">
                <img src="images/fork.png"/>
            </div>
            <div class="feature-2-writing">
                <h4>Feature 4</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
            </div>
        </div>
    </div>  
</div>

由于两个块都在相同的.col-md-4 div类引导程序中，因此我很难将文本和图像并排。

我希望它看起来像这样

任何人都可以帮助我，如何将两个div的一个用图像和另一个文本放在同一个bootstrap类中并排放置 我尝试了内联方法，浮动等。但没用。

提前致谢

Answer 1

你可以发布你对feature-1，feature-1-img和feature-1-writing的CSS吗？

修改

好的，这是开始的事情。我使用了固定宽度，但如果更符合您的需求，您可以更改为％

body {
    background-color:#42B8DC;
    color: #fff;
    min-width:850px
}

h4 {
    padding: 0;
    margin: 0;
}

.services {
    float:left;
    width:200px;
    font-size:30px;
    padding-left:20px;
    border-bottom:3px solid #fff;
}

.feature-1, .feature-2 {
    width:300px;
    height:128px; /* height of cloud img */
    float:left;
}

.feature-1-img, .feature-2-img {
    float:left;
}

.feature-1-writing, .feature-2-writing {
    height:128px; /* height of cloud img */
}

<div class="services">
    OUR<br/>SERVICES.
</div>
<div class="col-md-4">
    <div class="feature-group-1">
        <div class="feature-1">
            <div class="feature-1-img">
                <img src="http://cdn-img.easyicon.net/png/11136/1113608.gif"/>
            </div>
            <div class="feature-1-writing"> 
                <h4>Feature 1</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
            </div>  
        </div>
        <div class="feature-2">
            <div class="feature-2-img">
                <img src="http://cdn-img.easyicon.net/png/11136/1113608.gif"/>
            </div>
            <div class="feature-2-writing">
                <h4>Feature 4</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
            </div>
        </div>
    </div>  
</div>