Question

我遇到了我的文字问题，我根本没有看到它，或者它没有像我认为的那样在flexbox中表现出来。我现在在flexbox中有三个图像，但是我想在它们下面放置小的“标题”（不是在p元素中，紫色，但是我想把它放在白色的，就在它下面紫色框（p元素）。我认为通过添加一个子元素，该元素至少会与其上方的元素垂直排列，但我想我错了。任何人都可以帮忙吗？另一条信息就是我的图像是250像素，但我想容纳一个片段，所以我把它设为50像素，但这可能是无关紧要的。

#footer {
  display: flex;
  height: 130px;
  width: 100%;
  background-color: #862d59;
  clear: both;
}

#footer, #wrapper:after{
  height: 130px;
}

.wrap {
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.sub {
  padding: 12px;
  width: 32%;
  height: 100px;
  color: white;
  border-right: solid white 1px;
}

.sub:last-child {
  border: 0px;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin:0;
  font-family: courier;
  font-size: 22px;
  color: white;
}

#wrapper {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  min-height: 100%;
  margin-top: -130px;
}

#inner {
  position:absolute;
  display:flex;
  flex-wrap: wrap;
  height: 600px;
  top:50%;
  align-items: center;
  justify-content: space-between;
  margin-top: -300px;
  align-content: center;
  width: 100%;
}

#inner p {
  background-color: #26004d;
  padding: 60px;
  border-radius: 9px;
}

#inner img {
  border-radius: 8px;
}

<div id="wrapper">
  <div id="inner">
    <p><img src="cat1.jpeg" alt="Picture of a cat" width="50" height="50"></p>
    <p><img src="dog1.jpg" alt="Picture of a cat" width="50" height="50"></p>
    <p><img src="park.jpg" alt="Picture of a cat" width="50" height="50"></p>
  </div>
</div>
<div id="footer">
  <div class="wrap">
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
  </div>
</div>

Answer 1

如果没有其他信息/图片，我可以提出解决方案。如果要将每个图像/标题组合在一起，请将它们包装在另一个父div中。然后只需添加下面的标题，这是一个block元素，应按照预期在图像下方流动。下面的代码段。

＆＃13;

#footer {
  display: flex;
  height: 130px;
  width: 100%;
  background-color: #862d59;
  clear: both;
}

#footer, #wrapper:after{
  height: 130px;
}

.wrap {
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.sub {
  padding: 12px;
  width: 32%;
  height: 100px;
  color: white;
  border-right: solid white 1px;
}

.sub:last-child {
  border: 0px;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin:0;
  font-family: courier;
  font-size: 22px;
  color: white;
}

#wrapper {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  min-height: 100%;
}

#inner {
  position:absolute;
  display:flex;
  flex-wrap: wrap;
  height: 600px;
  top:50%;
  align-items: center;
  justify-content: space-between;
  margin-top: -300px;
  align-content: center;
  width: 100%;
}

#inner p {
  background-color: #26004d;
  padding: 60px;
  border-radius: 9px;
}

#inner p.caption {
  color: #000;
  background-color: transparent;
  border-radius: 0;
}

#inner img {
  display: block;
  border-radius: 8px;
}

＆＃13;

<div id="wrapper">
  <div id="inner">
    <div class="image-wrapper">
      <p>
        <img src="http://placehold.it/100x100" alt="Picture of a cat">
      </p>
      <p class="caption">Caption</p>
    </div>
    <div class="image-wrapper">
      <p>
        <img src="http://placehold.it/100x100" alt="Picture of a cat">
      </p>
      <p class="caption">Caption</p>
    </div>
    <div class="image-wrapper">
      <p>
        <img src="http://placehold.it/100x100" alt="Picture of a cat">
      </p>
      <p class="caption">Caption</p>
    </div>
  </div>
</div>
<div id="footer">
  <div class="wrap">
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
  </div>
</div>

＆＃13;

如果您有任何问题，或者这不符合您的描述，请与我们联系。

将文本放在图片下的弹性框中

1 个答案: