Пустое пространство между изображением и текстом, и когда я использую поле для изображения для привязки к текстовому адаптивному макету, не работает

White space между изображением и текстом, и когда я использую поле для изображения для прилипания к тексту, адаптивный макет не работает.

Когда я использую margin-left, чтобы вставить оба div, изображение не центрируется на нижних экранах из-за левого поля

HTML-код:

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

СКРИНШОТ НАЖМИТЕ ЗДЕСЬ


person Ashish Dongre    schedule 07.07.2016    source источник


Ответы (2)


Поскольку вы используете платформу начальной загрузки, каждый столбец имеет предустановленное отступы слева и справа по 15 пикселей. Очистите эту прокладку,

сделай это,

.col-md-5,.col-md-7{
    padding:0px;
}
person Saurabh Sonawane    schedule 07.07.2016

Добавьте некоторый класс в родительский 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;
}
person Pratik Deshmukh    schedule 07.07.2016