定位與文本內嵌的圖像

enter image description here

的功能看看圖像1具備4個是兩個不同的div的，我在引導類.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>

由於這兩個塊都在sam e .col-md-4 div class bootstrap，我很難將文本和圖像並排放置。

我希望它看起來像這樣

enter image description here

誰能幫我出去，如何定位兩個div的一個用圖像和其它與側相同的引導類側內的文本我試過內聯方法，浮點數等，但沒用。

在此先感謝

來源

2015-01-08 Ishq Mehta

這可能是圖像太大而不能適合所有的它，你可以更改爲％。或者檢查你是否在圖像/文本上放置了float：left屬性，而不是在主div上。 –

你能後你有功能-1 CSS，功能-1-IMG和功能-1寫作？

編輯

確定這裏是值得入手。我用固定的寬度，但如果符合您的需求更好地

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>

來源

2015-01-08 15:42:08 cspete

沒有我寫的CSS！除了html之外，它自然與您通過引導在圖像中看到的方式保持一致。 –

編輯我的答案給你一個開始 – cspete

好吧，這是真棒，感謝您的答覆。但我使用引導網格選項做了其他事情。不必處理css。特徵div即特徵-1和特徵-2。我進一步將它分爲col-md-4和col-md-8類。它的作用就像魅力。感謝您的回覆。我會將其標記爲正確:) –

定位與文本內嵌的圖像

回答

相關問題