Question

我已经为我的网页创建了一个图像网格，但是问题是它会自动与中心对齐，目前是这样：

如您所见，底部的两个图像与中心对齐，如何使其向左移动？并且两个黑条应移到右侧。

所以我尝试从CSS中删除此行：

margin:0 auto; /*center aligned*/

不幸的是，它没有用。

这是整个CSS：

#rig {
    max-width:900px;
    margin:0 auto; /*center aligned*/
    padding:0;
    font-size:0; /* Remember to change it back to normal font size if have captions */
    list-style:none;
    background-color: black;
}
#rig li {
    display: inline-block;
    *display:inline;/*for IE6 - IE7*/
    width:25%;
    vertical-align:middle;
    box-sizing:border-box;
    margin:0;
    padding:0;
}
        
/* The wrapper for each item */
.rig-cell {
    /*margin:12px;
    box-shadow:0 0 6px rgba(0,0,0,0.3);*/
    display:block;
    position: relative;
	overflow:hidden;
}
        
/* If have the image layer */
.rig-img {
    display:block;
    width: 100%;
    height: auto;
    border:none;
    transform:scale(1);
    transition:all 1s;
}

#rig li:hover .rig-img {
    transform:scale(1.05);
}
        
/* If have the overlay layer */
.rig-overlay {
    position: absolute;
    display:block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: #EF4D26;
    background-size:50px 50px;
    opacity:0;
    filter:alpha(opacity=0);/*For IE6 - IE8*/
    transition:all 0.6s;
}
#rig li:hover .rig-overlay {
    opacity: 0.8;
}

/* If have captions */
.rig-text {
    display:block;
    padding:0 30px;
    box-sizing:border-box;
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    text-transform:capitalize;
    font-size:20px;
    font-weight:bold;
    font-family: 'Karla', sans-serif;
    font-weight:normal!important;
    top:70%;
    color:white;
    opacity:0;
    filter:alpha(opacity=0);/*For older IE*/
    transform:translateY(-20px);
    transition:all .3s;
}
#rig li:hover .rig-text {
    transform:translateY(0px);
    opacity: 1;
}

@media (max-width: 9000px) {
    #rig li {
        width:25%;
    }
}

@media (max-width: 700px) {
    #rig li {
        width:33.33%;
    }
}

@media (max-width: 550px) {
    #rig li {
        width:50%;
    }
}

<ul id="rig">
  <li>
    <a class="rig-cell">
      <img class="rig-img" src="https://picsum.photos/200">
      <span class="rig-overlay"></span>
      <span class="rig-text">Short Description</span>
     </a>
  </li>
</ul

Answer 1

它远非完美，但这也许会帮助您朝正确的方向前进。

#rig {
    max-width:900px;
    margin:0 auto; /*center aligned*/
    display: flex;
    flex-wrap: wrap;
}

.rig-cell {
    position: relative;
    flex-basis:25%;
    margin:0;
    padding:0;
    line-height: 0;
    overflow: hidden;
}
   
.rig-img {
    max-width: 100%;
    height: auto;
    border:none;
    transform:scale(1);
    transition:all 1s;
    line-height: 0;
    margin: 0;
}

.rig-img:hover {
    transform:scale(1.05);
}

.rig-cell::after {
  content: "";
  width: 100%;
  height: 100%;
  background: #EF4D26;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition:all 0.6s;
}

.rig-cell:hover::after {
opacity: .8;
}
        
.rig-cell:hover .rig-text {
 bottom: 10%;
 opacity: 1;
}


/* If have captions */
.rig-text {
    display:block;
    padding:0 30px;
     line-height: 20px;
    box-sizing:border-box;
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    text-transform:capitalize;
    font-size:20px;
    font-weight:bold;
    font-family: 'Karla', sans-serif;
    font-weight:normal!important;
    bottom: 30%;
    color:white;
    opacity:0;
    transform:translateY(-20px);
    transition:all .3s;
    z-index: 2;
}

<section id="rig">

  <a class="rig-cell">
    <img class="rig-img" src="https://picsum.photos/200">
    <span class="rig-text">Short Description</span>
  </a>

  <a class="rig-cell">
    <img class="rig-img" src="https://picsum.photos/200">
    <span class="rig-text">Short Description</span>
  </a>

  <a class="rig-cell">
    <img class="rig-img" src="https://picsum.photos/200">
    <span class="rig-text">Short Description</span>
  </a>

  <a class="rig-cell">
    <img class="rig-img" src="https://picsum.photos/200">
    <span class="rig-text">Short Description</span>
  </a>

  <a class="rig-cell">
    <img class="rig-img" src="https://picsum.photos/200">
    <span class="rig-text">Short Description</span>
  </a>

</section>

自动将图像网格向左对齐

1 个答案: