CSS

Question

我想了解如何在 CSS 中放置多个图像，而不影响我的页脚位置、大小等。

我编写了一些 CSS 我认为可行的代码，但它弄乱了我的页脚位置。（它不会留在底部。）所以，我解决了这个问题，但发现我为图像位置编写的代码与页脚位置混淆了。我真的不知道该怎么做，但我想让我的图像定位，也许是 px/space.. 它们只需要在间隔的行中看起来不错。

这个例子是红色的，是我想要的样子。 look here for an example of how I want it to look. HTML

<div class="batesimg">
<p><strong>Bates</p></strong>
<div class="shadow"> <!-- makes a shadow, surrounding the characters picture. -->
<img src="images/bates.png" alt="Bates" width="150" height="150"> <!-- defines the img -->

CSS

/* Bates profile picture. */
.batesimg { /* or whatever class name works for you */
position: auto;
left:250px;
top:250px;
margin-right: 500px;
}

注意，上面的 css 没有按照我想要的方式定位图像，在图像示例中显示，有人可以帮我定位图像，就像我在示例中那样图片？谢谢！

Answer 1

您想重复相同类型的名称、图片和描述模式。我们称之为 'card'。现在你手头有两个问题。

1) 在页面中放置多张卡片。为此，请使用一些布局，例如 flexbox。

2) 正确设置卡内部..

/*1st Problem*/
#flex-container{
  display: flex;
  flex-wrap:wrap;
  width: 600px;
  justify-content: space-around;
}
#flex-container>div.card{
  flex-grow:0;
  flex-shrink:0;
}
/*1st Problem ends*/

/*2nd Problem*/
.card{
  width: 200px;
  height:calc(200px + 2em);
}
.card>.name ,.card>.desc{
  width: 100%;
  text-align: center;
}
.card>div.img{
  position: relative;
  margin-left: 25px;
  width: 150px;
  height: 150px;
  border-radius: 100%;
}
/*2nd Problem ends*/

.card:nth-child(1) div.img{background-color: red;}
.card:nth-child(2) div.img{background-color: green;}
.card:nth-child(3) div.img{background-color: blue;}
.card:nth-child(4) div.img{background-color: yellow;}


/*Centering Content*/
#flex-container{
  margin: 0 auto;
  /*top,bottom both zero.. and left,right both auto..
  handling margin is complicated..read about them
  */
}

<div id="flex-container">
  <div class="card">
    <div class="name">Name1</div>
    <div class="img"></div>
    <div class="desc">Desc1</div>
  </div>
  <div class="card">
    <div class="name">Name2</div>
    <div class="img"></div>
    <div class="desc">Desc2</div>
  </div>
  <div class="card">
    <div class="name">Name3</div>
    <div class="img"></div>
    <div class="desc">Desc3</div>
  </div>
  <div class="card">
    <div class="name">Name4</div>
    <div class="img"></div>
    <div class="desc">Desc4</div>
  </div>
</div>

如有任何其他问题，请访问 Flexbox

CSS - 如何定位多张图片

CSS - How to position multiple images

image

positioning