Question

我为我的一个网站建立了一个投资组合并下载了一个模板，我设法将它实现到我自己的网站中，但我现在正在努力将其水平显示在它的所有垂直方向上。我的代码如下：

HTML CODE

       <div id="portfolio">
        <div class="content center">
            <h2>PORTFOLIO</h2>
            <div class="borderline"></div>
      </div>
       <!--Portfolio grid-->

  <ul class="portfolio-grid" id="portfolio-sidebar">


    <li class="grid-item">
      <img src="img/portfolio/1.jpg">
        <a class="ajax-link" href="single.html">  
          <div class="grid-hover">
            <h1>Single</h1>
            <p>Branding</p>
          </div>
        </a>  
    </li>

    <li class="grid-item">
      <img src="img/portfolio/5.jpg">
        <a class="ajax-link" href="single-fullscreen.html">  
          <div class="grid-hover">
            <h1>Full Screen</h1>
            <p>Branding</p>
          </div>
        </a>      
    </li>    

    <li class="grid-item">
      <img src="img/portfolio/2.jpg">
        <a class="ajax-link" href="#">  
          <div class="grid-hover">
            <h1>Single</h1>
            <p>Branding</p>
          </div>
        </a>      
    </li>  

    <li class="grid-item">
      <img src="img/portfolio/3.jpg">
        <a class="ajax-link" href="#">  
          <div class="grid-hover">
            <h1>Single</h1>
            <p>Branding</p>
          </div>
        </a>      
    </li>    

    <li class="grid-item">
      <img src="img/portfolio/4.jpg">
        <a class="ajax-link" href="#">  
          <div class="grid-hover">
            <h1>Single</h1>
            <p>Branding</p>
          </div>
        </a>      
    </li>    

    <li class="grid-item">
      <img src="img/portfolio/6.jpg">
        <a class="ajax-link" href="#">  
          <div class="grid-hover">
            <h1>Single</h1>
            <p>Branding</p>
          </div>
        </a>      
    </li>  

  </ul>

  </div>

CSS

  /*2.2. Portfolio
**********************************************************************/
#ajax-content{width:100%;}

.portfolio-grid{
  width:1170px;
  position:relative;
  margin: 30px auto;
  overflow:hidden;
}

#portfolio-sidebar{
  width: 780px !important;
  padding-right: 390px;

}

li.grid-item{
  width:360px;
  position:relative;
  padding:15px;
  display:block;
}

.grid-hover{
  position: absolute;
  width:360px;
  height: 100%;
  top:0;
  background: white;
  z-index: 2;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in; 
}

.grid-hover:hover{
  opacity: 0.9;
}

.grid-hover h1{
  font-size:23px;
  bottom:80px;
  left:40px;
  position:absolute;
  text-transform:uppercase;
  color:#000000;
  letter-spacing:1px;
  font-weight:900;
  line-height:50px;
}

.grid-hover p{
  font-size:13px;
  bottom:40px;
  left:40px;
  position:absolute;
  color:#686868;
  letter-spacing:1px;
  font-weight:400;
  line-height:50px;
}

li.grid-item img{
  width:360px;
}

的jsfiddle https://jsfiddle.net/3hwvvbod/

Answer 1

您有这些规则阻止它水平显示：

li.grid-item{
  width: 360px;
  padding: 15px;
  display: block; /*key*/
}

将其更改为：

li.grid-item{
  display: inline-block;
}

调整width / .portfolio-grid的{{1}}会有所帮助。注意，对于相同的属性，第一个将被第二个覆盖。因为您将其设置为#portfolio-sidebar。我建议不要使用ID选择器进行样式化。

<强> jsFiddle

Answer 2

试试这个css：

li.grid-item{
  width:360px;
  position:relative;
  padding:15px;
  display:inline;
  float:left;

}

Answer 3

 .portfolio-grid{
 position:relative;
 margin: 30px auto;
 overflow: scroll-y;
 display: inline;
 white-space: nowrap
 }

#portfolio-sidebar{
  width: auto !important;

}

您需要在.portfolio-grid类中将li / images切换为内联和未设置的宽度。我添加了overflow：scroll-y和white-space nowrap到css类定义。

请参阅https://jsfiddle.net/vuqonrdo/

Answer 4

只需将float:left添加到li.grid-item即可。即使display:inline会得到相同的结果，即明智aligning，但您需要在添加内联时进行填充。

li.grid-item{
  float:left;
}

（或）

li.grid-item{
display:inline;
}

如何使图像水平显示

4 个答案: