我该如何解决这个定位？

Question

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

/* 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

Answer 1

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-*。不需要任何.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>

Answer 2

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

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

首先将所有网格项目包装在 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 个断点。

我该如何解决这个定位？

How do i fix this positioning?

html

css

whitespace

portfolio

removing-whitespace