2016-07-07 10 views
1

White space画像とテキストとの間に余白を使用すると、画像とテキストとの間の空白と、テキストに反応するための画像にマージンを使用すると反応しません。

<section id="aa-about-us"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <div class="aa-about-us-area"> 
      <div class="row"> 
      <div class="aa-title"> 
        <h2>Nature's Paradise</h2> 
        <span></span> 
        </div> 
       <div class="col-md-5"> 
       <div class="aa-about-us-left"> 
        <img src="img/homepagecontent1.jpg" alt="image"> 
       </div> 
       </div> 

       <div class="col-md-7"> 
       <div class="aa-about-us-right"> 

        <div class="text-right"> 
        <p>Karjat is an idyllic town and an upcoming taluka of Raigad district for various development projects.<br/> Situated on the western coast on India, Karjat lies in the downhill of Matheran which is the nearest hill station to Mumbai.<br/> The upside being it comes under the MMRDA development zone and the responsibility for planning is entrusted with CIDCO.<br/> 
     Karjat is Strategically located in the centre of the golden triangle viz. Mumbai, Pune and Nashik, It is well connected with for lane roads and a strong railway network.<br/> Karjat is a railway junction between Mumbai-Pune on Central line.<br/> 
     Karjat is an educational hub as there are many Engineering, Medical Pharmacy, Management colleges and Marine academy.<br/> 
    Project in Raigad district like Reliance SEZ, Navi Mumbai SEZ, International Airport (Navi Mumbai), largest exhibition centre (Panvel) and Terminus Railways Stations (Panvel) etc.<br/> Is enhancing the growth in all fronts required to further fuel Karjat and turn it in to preferred first/second home destinations which is a growth centred destination.<br/> 
    Because of its green and pollution free environment many Bollywood Stars, industrialist, businessmen and corporates have their private farm house in Karjat thus evolving as prime weekend gateway destination.<br/> 
    MMRDA has planned to develop a part of area in Karjat-Khopoli belt as recreational hub.<br/> On the horizon are T20 Cricket League Ground, Paint Ball Park, Theme Park, Amusement Park and golf course. 
</p>     
       </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </section> 

CSSスタイル:

#aa-about-us { 
    display: inline; 
    float: left; 
    width: 100%; 
} 
#aa-about-us .aa-about-us-area { 
    display: inline; 
    float: left; 
    width: 100%; 
    padding: 100px 0; 

} 
#aa-about-us .aa-about-us-area .aa-about-us-left { 
    margin-top: 15%; 
    display: inline; 
    float: left; 
    width: 100%; 
} 
#aa-about-us .aa-about-us-area .aa-about-us-left img { 
    border: 1px solid #ddd; 
    border-radius: 4px; 

    width: 100%; 

} 

#aa-about-us .aa-about-us-area .aa-about-us-right p { 
    text-align: center; 
} 


#aa-about-us .aa-about-us-area .aa-about-us-right .text-right { 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 4px; 

    margin-top: 10%; 
    background-color: #f8f8f8; 
    padding: 10px; 
} 

#aa-about-us .aa-about-us-area .aa-about-us-right { 
    display: inline; 
    float: left; 
    width: 100%; 
} 

.aa-title { 
    display: inline; 
    float: left; 
    width: 100%; 
    text-align: center; 
    margin-bottom: 20px; 
} 
.aa-title p { 
    font-size: 18px; 
    padding: 0 50px; 
} 
.aa-title span { 
    width: 2px; 
    height: 15px; 
    display: inline-block; 
    position: relative; 
} 
.aa-title span:before { 
    content: ''; 
    right: 4px; 
    top: 7px; 
    position: absolute; 
    width: 100px; 
    height: 2px; 
} 
.aa-title span:after { 
    content: ''; 
    left: 4px; 
    top: 7px; 
    position: absolute; 
    width: 100px; 
    height:2px; 
} 

私は両方の画像が原因のmargin-left

HTMLコードの下の画面の中央に配置されていない をDIV固執するmargin-leftを使用

SCREENSHOT CLICK HERE

答えて

0

ブートストラップフレームワークを使用しているので、各列にはの定義済みの左右のパディングが15pxとなっています。そのパディングアウトをクリア、

.col-md-5,.col-md-7{ 
    padding:0px; 
} 
+0

はあまりそれが働いてありがとうございました!!! –

0

は、これらのクラスを使用して画像やコンテンツ&上書きパディングの親のdivにいくつかのクラスを追加し、これを行います。

HTML:

<div class="col-md-5 image-container"> 
      <div class="aa-about-us-left"> 
       <img src="img/homepagecontent1.jpg" alt="image"> 
      </div> 
      </div> 

      <div class="col-md-7 content-container"> 
      <div class="aa-about-us-right"> 

       <div class="text-right"> 
       <p>Text</p>    
      </div> 
      </div> 
      </div> 

はCSS:

.image-container { 
padding-right: 0px; 
} 
.content-container { 
padding-left: 0px; 
} 
関連する問題