我该如何解决这个定位？答案

【问题标题】：How do i fix this positioning?我该如何解决这个定位？
【发布时间】：2017-06-06 11:12:44
【问题描述】：

我正在尝试创建个人作品集网站，但位置或图像本身存在问题。我什么都试过了，没有什么能解决的。例如：尝试添加左浮动，显示块。不工作。最后我放弃了。请大家帮忙。

/* About - Portfolio */

.about-portfolio {
    float: left;
    width: 100%;
    color: rgb(199, 199, 199);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;}

.portfolio-header {
    margin-top: 20px;}

.about-style .portfolio-text {
    font-size: 40px;}

.about-portfolio:hover {
    color: rgb(0, 0, 0);}

.works-gallery {
    position: relative;}

.about-portfolio .grid-item {
    padding: 0px;}

.works-gallery img {
    width: 100%;}

.clearfix {
	clear: both;
}

<div id="portfolio" class="about-portfolio">
				
						<div class="portfolio-header">
							<h2 class="portfolio-text">Our Works</h2>
							<div class="divider"></div>
						</div>
				
						<div class="col-sm-6 col-md-4 grid-item">
							<div class="works-gallery">
                            <a href="img/1.png">
                                <img src="assets/img/portfolio/portfolio-1.jpg" alt="Image description" class="img-responsive">
                            </a>
                            </div>
                        </div>
				
						<div class="col-sm-6 col-md-4 grid-item">
							<div class="works-gallery">	
                            <a href="img/1.png">
                                <img src="assets/img/portfolio/portfolio-2.jpg" alt="Image description" class="img-responsive">
                            </a>
                           </div> 
                        </div>
						
						<div class="col-sm-6 col-md-4 grid-item">
						<div class="works-gallery">
                            <a href="img/1.png">
                                <img src="assets/img/portfolio/portfolio-3.jpg" alt="Image description" class="img-responsive">
                            </a>
                            </div>
                        </div>
						
			<!-- CLEARFIX -->
			
				<div class="clearfix"></div>
				
						<div class="col-sm-6 col-md-4 grid-item">
						<div class="works-gallery">
                            <a href="img/1.png">
                                <img src="assets/img/portfolio/portfolio-4.jpg" alt="Image description" class="img-responsive">
                            </a>
                            </div>
                        </div>
					
						<div class="col-sm-6 col-md-4 grid-item">
						<div class="works-gallery">
                            <a href="img/1.png">
                                <img src="assets/img/portfolio/portfolio-5.jpg" alt="Image description" class="img-responsive">
                            </a>
                            </div>
                        </div>
			  			
						<div class="col-sm-6 col-md-4 grid-item">
						<div class="works-gallery">
                            <a href="img/1.png">
                                <img src="assets/img/portfolio/portfolio-6.jpg" alt="Image description" class="img-responsive">
                            </a>
							</div>
			</div>
			
		</div>

That whitespace

after adding clearfix

【问题讨论】：

我很确定您的问题是您的浮动后没有 clearfix 类，您可以尝试删除浮动并发布关于输出的屏幕截图吗？
好的，但是在哪里添加 clearfix 类？ @Fares Shawa
通常在每个浮动元素之后添加一个 clearfix。所以应该在 about.portfolio 之后。但首先你需要创建它。 .clearfix {clear: both;}
你的问题到底是什么？
@Fares Shawa 在第三个 col-sm-6 div 之后添加了 clearfix div 并且它是固定的，但我不确定我是否正确？！

标签： html css whitespace removing-whitespace portfolio

【解决方案1】：

您遇到的问题在网格布局中很常见。如果每列的高度不完全相同，它们将无法正确清除。

您需要清除每个新行的第一个元素。您添加的 clearfix div 将破坏布局的 2 列版本。还值得注意的是，Bootstrap 包含一个 clearfix 类，因此您添加的样式会覆盖默认值。

首先将所有网格项包装在一个 div 中。

<div class="work-gallery-container clearfix">
    <div class="col-sm-6 col-md-4 grid-item">
            <div class="works-gallery">
                <a href="img/1.png">
                    <img src="assets/img/portfolio/portfolio-1.jpg" alt="Image description" class="img-responsive">
                </a>
            </div>
        </div>

        . . . ALL THE WAY TO THE LAST ITEM . . .

        <div class="col-sm-6 col-md-4 grid-item">
            <div class="works-gallery">
                <a href="img/1.png">
                    <img src="assets/img/portfolio/portfolio-6.jpg" alt="Image description" class="img-responsive">
                </a>
            </div>
        </div>
</div><!-- .work-gallery-container -->

然后应用一些 CSS。

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .work-gallery-container .grid-item:nth-child(2n+1) {
        clear: both;
    }
}

@media only screen and (min-width: 992px) {
    .work-gallery-container .grid-item:nth-child(3n+1) {
        clear: both;
    }
}

这假设您使用的是标准 Bootstrap 3 断点。

【讨论】：

【解决方案2】：

Bootstrap 库已经提供了您所要求的内容。您需要做的就是注意不要破坏必要的标记。这是一个工作示例：

.img-responsive {
  min-width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="portfolio" class="about-portfolio">
    <div class="portfolio-header">
      <h2 class="portfolio-text">Our Works</h2>
      <div class="divider"></div>
    </div>
    <div class="row">
      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/E8117F/ffffff" class="img-responsive">
          </a>
        </div>
      </div>

      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">	
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/999999/ffffff" class="img-responsive">
          </a>
        </div> 
      </div>

      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/ffffff/666666" class="img-responsive">
          </a>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/E8117F/ffffff" class="img-responsive">
          </a>
        </div>
      </div>

      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">	
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/999999/ffffff" class="img-responsive">
          </a>
        </div> 
      </div>

      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/ffffff/666666" class="img-responsive">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

您可能会注意到我添加的唯一CSS 规则是使小图像适合其父宽度。另请注意，只有一行包含所有 col-*s。不需要任何.clearfix。

如果您希望将图像粘合在一起，最简单的方法是使用以下 CSS：

.img-responsive {
  min-width: calc(100% + 30px);
  position: relative;
  left: -15px;
}

.img-responsive {
  min-width: calc(100% + 30px);
  position: relative;
  left: -15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="portfolio" class="about-portfolio">
    <div class="portfolio-header">
      <h2 class="portfolio-text">Our Works</h2>
      <div class="divider"></div>
    </div>
    <div class="row">
      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/E8117F/ffffff" class="img-responsive">
          </a>
        </div>
      </div>

      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">	
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/787878/ffffff" class="img-responsive">
          </a>
        </div> 
      </div>

      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/ffffff/666666" class="img-responsive">
          </a>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/E8117F/ffffff" class="img-responsive">
          </a>
        </div>
      </div>

      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">	
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/999999/ffffff" class="img-responsive">
          </a>
        </div> 
      </div>

      <div class="col-sm-6 col-md-4 grid-item">
        <div class="works-gallery">
          <a href="img/1.png">
            <img src="http://placehold.it/350x150/cccccc/666666" class="img-responsive">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

谢谢@Andrei Gheorghiu，100% 解决了我的问题：D
不客气。快乐编码！ .. :: } ::