Question

我试图建立个人投资组合网站，但对位置或图像本身有疑问。我已经尝试了一切，没有任何修复它。例如：尝试添加浮动左，显示块。不工作。我最后放弃了。请帮帮我们。

＆＃13;

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

＆＃13;

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

＆＃13;

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类，因此您添加的样式将覆盖默认值。

首先将所有网格项目包装在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 个答案: