图像和文本之间的白色 space 以及当我使用图像边距来粘附文本响应式布局时不起作用

Question

White space 在图像和文本之间以及当我使用图像边距来粘附文本响应式布局时不起作用。

当我使用margin-left同时粘贴div 由于 margin-left

，图像未居中在较低的屏幕中

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

Answer 1

由于您使用的是 bootstrap 框架，每列都有 预定义的 15px 的左右填充。清除填充，

这样做，

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

Answer 2

将一些 class 添加到图像和内容的父级 div 并使用那些 classes 覆盖填充。

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

图像和文本之间的白色 space 以及当我使用图像边距来粘附文本响应式布局时不起作用

White space between image and text and when I use margin to image for sticking to text responsive layout does not work

html

css

whitespace

responsive