定位带有内联文本的图像

Question

请看下图

功能 1 和功能 4 是两个不同的 div，我在 bootstrap class .col-md-4

下面是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 class of bootstrap 中，我很难将文本和图像并排显示。

我希望它看起来像这样

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

提前致谢

Answer 1

你能post你的CSS feature-1、feature-1-img 和 feature-1-writing 吗？

编辑

好的，这里是开始的地方。我使用了固定宽度，但如果更符合您的需要，您可以更改为 %

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>

定位带有内联文本的图像

Positioning an image with text inline

html

css

twitter-bootstrap-3