Question

我正试图在图像库上制作一个像横幅一样的跨度和一些中心对齐的h2但是没有做得很好。

这是一个速成课程，并且作业将于周三晚上到期，我将在今晚和明天继续调试代码，但我想我会使用可用的资源并询问社区。

感谢任何和所有帮助。我甚至不需要正确答案＆＃34;我只需要一些指导即可。

如何解决我的错误？

<div class="sizing">
<div class="maincontent">
    <section>
        <ul>

            <li class="gallery"> 
                <img src="assets/images/holding-and-point-on-tablet-pc-P4YGEVW.jpg" alt="Hangman">
                <span><h2>Hangman</h2></span>
            </li>
            <li> 
                <img src="assets/images/game-PJVG95Z.jpg" alt="RPG Game">
                <span><h2>Hangman</h2></span>
            </li>
            <li> 
                <img src="assets/images/concentrated-man-sitting-at-home-indoors-play-PZGRWH7.jpg" alt="Trivia Game ">
                <span><h2>Hangman</h2></span>
            </li>
            <li> 
                <img src="assets/images/statistics-strategy-analysis-diagram-information-P9KEFGF.jpg" alt="Reutgers">
                <span><h2>Hangman</h2></span>
            </li>
            <li>
                 <img src= "assets/images/note-tied-to-rock-PUJU6N2.jpg" alt="Rock Paper Scissors">
                 <span><h2>Hangman</h2></span>
            </li>
        </ul>
    </section>
</div>
</div>

.sizing {
max-width: 960px;

margin: 0 auto;
}

.maincontent {
    background-color: #FFFFFF;
    float: left;
    max-width:650px;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-bottom:30px;
}

img {
height:"";
width:40%;
float: left;
display: inline-block;
position:relative;
margin-right:2px;
margin: 0 auto;
margin:30px;
border:1px solid #ddd;
}


.gallery {
position:relative;
 }
.gallery span {
position:absolute;
bottom:20px;
left:0px;
background: #4aaaac;
}

The example I am trying to mimic

Answer 1

在img和span标记周围应用div，这将有助于应用绝对定位并重叠h2标记

    [![<style>

.sizing {
max-width: 960px;

margin: 0 auto;
}

.maincontent {
    background-color: #FFFFFF;
    float: left;
    max-width:650px;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-bottom:30px;
}

img {
height:"";
width:40%;
float: left;
display: inline-block;
position:relative;
margin-right:2px;
margin: 0 auto;
margin:30px;
border:1px solid #ddd;
}


.gallery {
position:relative;
 }
.gallery span {
position:absolute;
bottom:20px;
left:0px;
background: #4aaaac;
}
.sp{
position:absolute;
top:24%;
left:14%
}
</style>

<div class="sizing">
<div class="maincontent">
    <section>
        <ul>

            <li class="gallery"> 
               <div>
                <span><h2>Hangman1</h2></span>
                </div>
            </li>

            <li>
                 <div   style="width:200px;height:200px;background-color:green;">
                 <span class="sp"><h2>Hangman2</h2></span>
                 </div>
            </li>
        </ul>
    </section>
</div>
</div>][1]][1]

Answer 2

您可以通过清理代码并将图像设置为background-image，而不是使用单独的img元素来轻松实现此目的。

编辑：这里使用无序列表的版本中的原理相同，以备您需要时使用。图像是占位符，每个图库项目的宽度/高度可以轻松调整：

＆＃13;

.sizing {
  max-width: 960px;
  margin: 0 auto;
}

.maincontent {
  background-color: #FFFFFF;
  float: left;
  width: 100%;
}

.gallery {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 150px;
  margin: 20px;
}

#gallery-first {
  background: url('http://via.placeholder.com/200x150') no-repeat;
  background-size: cover;
}

#gallery-second {
  background: url('http://via.placeholder.com/200x150') no-repeat;
}

#gallery-third {
  background: url('http://via.placeholder.com/200x150') no-repeat;
}

#gallery-fourth {
  background: url('http://via.placeholder.com/200x150') no-repeat;
}

#gallery-fifth {
  background: url('http://via.placeholder.com/200x150') no-repeat;
}

.gallery span {
  position: absolute;
  background: #4aaaac;
  top: 65px;
  left: 0;
  text-align: center;
  width: 100%;
}

ul {
  list-style-type: none;
}

＆＃13;

<div class="sizing">
  <div class="maincontent">
    <section>
      <ul>
        <li class="gallery" id="gallery-first">
          <span><h2>Hangman</h2></span>
        </li>
        <li class="gallery" id="gallery-second">
          <span><h2>Hangman</h2></span>
        </li>
        <li class="gallery" id="gallery-third">
          <span><h2>Hangman</h2></span>
        </li>
        <li class="gallery" id="gallery-fourth">
          <span><h2>Hangman</h2></span>
        </li>
        <li class="gallery" id="gallery-fifth">
          <span><h2>Hangman</h2></span>
        </li>
      </ul>
    </section>
  </div>
</div>

＆＃13;

希望这有帮助！

Answer 3

这是一个

.outer-div {
  position: relative;
  width: 200px;
  height: 200px;
  background-image: url('http://via.placeholder.com/200x200');
}

.inner-div {
  position: absolute;
  bottom: 5%;
  height: 60px;
  width: 100%;
  background-color: #4aaaac;
}

.inner-div>span {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

<div class="outer-div">
  <div class="inner-div">
    <span>Hangman</span>
  </div>
</div>

Answer 4

无需更改HTML，也无需将图像置于后台。试试吧。你只需要更新css，你的HTML就好了。您可以根据需要更改li宽度。

    .sizing {
    max-width: 960px;

    margin: 0 auto;
    }

    .maincontent {
        background-color: #FFFFFF;
        float: left;
        max-width:650px;
        margin-top: 50px;
        margin-bottom: 50px;
        padding-bottom:30px;
    }
    .maincontent ul {
        list-style: none;
    }
    .maincontent ul li {
        float: left;
        margin: 5px;
        width: 185px;
        position: relative;
    }
    .maincontent ul li img { 
        width: 100%;
        height: auto;

    }
    .maincontent ul li span {
    position:absolute;
    bottom:20px;
    left:0px;
    width: 100%;
    text-align: center;
    background: #4aaaac;
    }

试图在图像上叠加跨度和h2，但不成功

4 个答案: