-1

所以我有这个代码：

/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
 width: 200px;
 height: 200px;
 background-size: cover;
 display: block;
  border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 float: left;
 background: red;
}
.img-circular1{
   background-image: url('/Images/learn.jpg');
}
.img-circular2{
   background-image: url('/Images/watch.jpg');
}
.img-circular3{
   background-image: url('/Images/practice.jpg');
}
#container1
{
top: 100px; 
    position: relative;
    margin-left:auto;
    margin-right:auto;
    width:70%;
    background-color: green;
    overflow: auto;
    bottom: 0;
}
<div id="container1" style="padding-bottom: 500px;">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
<div class="img-circular1"></div>
</div>

我没有设法让其中两个显示在绿色框中。但是第三个（我在其他两个之前和之后复制的）由于某种原因不会显示？

此外，它们之间的距离不是等距的——我怎样才能让它们之间的距离相等？

请帮忙

注意：仅出于可见性原因，而不是图像有红色圆圈。

4

2 回答 2

1

应用于float: left图像本身，而不是容器：

/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
 /*width: 200px;*/
 /*height: 200px;*/
 width: 100px;
 height: 100px;
 background-size: cover;
 display: block;
  border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 float: left;
}
.img-circular1{
   background-image: url('/Imageslearn.jpg');
   background: #aaa; /*added to as an alternative to image*/
}
.img-circular2{
   background-image: url('/Images/watch.jpg');
   background: #aaa; /*added to as an alternative to image*/
}
.img-circular3{
   background-image: url('/Images/practice.jpg');
      background: #aaa; /*added to as an alternative to image*/
}
.container1{
	left: 15%; 
	width: 70%; 
/* 	float: left;  */
	height: 300px;
	position: relative; 
  }
<div class="container1">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
</div>

回答你的第二个问题：

  1. 在其他一些 div 中包裹圆圈
  2. 使它们的宽度为某个百分比值并将它们向左浮动
  3. 将圆圈上的边距设置为margin: 0 auto。

这是原型供您学习：

#green {
  background: green;
  padding: 10px;
  overflow: auto;
}

#blue {
  background: blue;
  width: 50%;
  float: left;
  border: 1px solid #fff;
  box-sizing: border-box; /*good for when there is border or padding*/
}

#red {
  background: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
}
<div id="green">
  <div id="blue">
    <div id="red"></div>
  </div>
  <div id="blue">
    <div id="red"></div>
  </div>
  <div id="blue">
    <div id="red"></div>
  </div>
  <div id="blue">
    <div id="red"></div>
  </div>
</div>

于 2017-07-05T18:58:35.180 回答
0

我更新了您的代码以使用FlexBox。由于您希望您的圈子在整行中等距分布，float: left因此无济于事。我必须在每个圆形 div 周围添加一个包装 div，以便它可以扩展以填充空间而不会扭曲圆形。

/*--- Circular images --- */

.img-circular1,
.img-circular2,
.img-circular3 {
  width: 200px;
  height: 200px;
  background-size: cover;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  background: red;
  display: block;
  margin: 0 auto;
}

.img-circular1 {
  background-image: url('/Images/learn.jpg');
}

.img-circular2 {
  background-image: url('/Images/watch.jpg');
}

.img-circular3 {
  background-image: url('/Images/practice.jpg');
}

#container1 {
  top: 100px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  background-color: green;
  overflow: auto;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.wrap {
  flex-grow: 1;
}
<div id="container1" style="padding-bottom: 500px;">
  <div class="wrap">
    <div class="img-circular1"></div>
  </div>
  <div class="wrap">
    <div class="img-circular2"></div>
  </div>
  <div class="wrap">
    <div class="img-circular3"></div>
  </div>
  <div class="wrap">
    <div class="img-circular1"></div>
  </div>
</div>

于 2017-07-05T20:11:17.360 回答