Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
189 views
in Technique[技术] by (71.8m points)

html - where would i put my <img> tag in order to get it below my flex-container

<!DOCTYPE html>
<head>
<style>
body {
  background-image: url('https://www.hdwallpapers.in/download/renegade_raider_skin_in_blur_blue_background_fortnite_hd_games-1920x1080.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-postion: center;
}
.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  background-color: rgba(0, 255, 0, 0);;
}

.flex-container > div {
  background-color: rgba(29, 137, 238, 0.7);;
  flex: 1 1 100px;
  width: 200px; 
  height: 80px;
  margin: 20px;
  text-align: center;
  line-height: 80px;
  font-size: 50px;
}
</style>
</head>
</style>
</head>
<body>
  <center><font color ="#ffffff" size="20px"><b>FortHub's Shop</b></font></center>
  <br>
  <center><font color="#fffff" size="7px"><p2>Stock and prices can be found below</p2><br></center>
    <center><font color="#fffff" size="6px"><p2>You can purchase an account by joining the discord and telling a staff member!</p2><br></center>
    <center><font color="white">Click the button to join!<br><a href="https://discord.gg/wKb8cF8Q7s" target="_blank"><img src="https://emoji.gg/assets/emoji/6812_disc.png" width="64px" height="64px" style='vertical-align: middle;'></center></a>
    <div class="flex-container">
  <div>Account #1</div>
  <div>Account #2</div>
  <div>Account #3</div>  
</div>
</body>

I would like to make it so that I have the flex-container displaying 3 boxes, I got that, but how or where would I put the tag so that the image I want appears below and is in line with each individual box?

note: I do not want the image to repeat i just want 3 individual images, 1 below each box

question from:https://stackoverflow.com/questions/65849688/where-would-i-put-my-img-tag-in-order-to-get-it-below-my-flex-container

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Create another flex-container directly below the existing one, with 3 images in it and similar settings as the one you already have.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...