Question

我正在尝试为我的网站制作一个关于页面的信息。我试图将3个图像居中在div中，同样在页面上展开，使用css调整到窗口大小。

我的问题是：

如何在div中使用相同的宽度，同时在左侧和右侧具有相同的宽度？

我读到的其他解决方案实际上并没有为我提供解决方案。

这是我的代码：

#screamer {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/screamer.png);
  background-size: 100%;
  float: left;
}
#kinzu {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/screamer.png);
  background-size: 100%;
  float: left;
}
#swezii {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/screamer.png);
  background-size: 100%;
  float: left;
}

<div class="container">
  <div class="row" id="managers-row">
    <h4 id="managers-head">Our Managers</h4>
    <div class="one-third.column" id="screamer">
    </div>
    <div class="one-third.column" id="kinzu">
    </div>
    <div class="one-third.column" id="swezii">
    </div>
  </div>
</div>

Answer 1

只使用宽度的百分比值而不是像素值。

.column {
   width: 33.333333%;
   box-sizing: border-box;
   padding: 0 20px;
}

box-sizing允许您向列中添加填充，而不会使总宽度大于目标33.333％

Answer 2

在HTML中使用了中心标记，并删除了float：left;

WORKING:DEMO：更新

<强> HTML

 <div class="container">
  <div class="row" id="managers-row">
    <h4 id="managers-head">Our Managers</h4>
    <center><!-- Added -->
    <div class="one-third.column" id="screamer">
    </div>
    <div class="one-third.column" id="kinzu">
    </div>
    <div class="one-third.column" id="swezii">
    </div>
    </center>
  </div>
</div>

CSS

#screamer {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      background-color: rgba(255, 255, 255, 0);
      background-image: url(http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810004.png);
      background-size: 100%;
    }
    #kinzu {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      background-color: rgba(255, 255, 255, 0);
      background-image: url(http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810004.png);
      background-size: 100%;
    }
    #swezii {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      background-color: rgba(255, 255, 255, 0);
      background-image: url(http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810004.png);
      background-size: 100%;
    }

    #screamer, #kinzu, #swezii
    {
        display:inline-block;
    }

Answer 3

如果需要，您可能需要向managers-row添加fixed with并使用自动边距

#managers-row {
    width: 240px;
    margin: auto;
}

#screamer {
  border-radius: 50%;
  width: 33.33%;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/screamer.png);
  background-size: 100%;
  float: left;
}
#kinzu {
  border-radius: 50%;
  width: 33.33%;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/screamer.png);
  background-size: 100%;
  float: left;
}
#swezii {
  border-radius: 50%;
  width: 33.33%;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  background-image: url(../images/screamer.png);
  background-size: 100%;
  float: left;
}

<div class="container">
  <div class="row" id="managers-row">
    <h4 id="managers-head">Our Managers</h4>
    <div class="one-third.column" id="screamer">
    Screamer
    </div>
    <div class="one-third.column" id="kinzu">
    Kinzu
    </div>
    <div class="one-third.column" id="swezii">
    Swezii
    </div>
  </div>
</div>

Answer 4

你的html中有一些错误，以及一些不正确的CSS。以下是我认为您正在寻找的内容：

http://jsfiddle.net/jkjzpz7z/2/

<div class="container">
  <div class="row" id="managers-row">
    <h4 id="managers-head">Our Managers</h4>
    <div class="column one-third">
        <div class="screamer"></div>
    </div>
    <div class="column one-third">
        <div class="kinzu"></div>
    </div>
    <div class="column one-third">
        <div class="swezii"></div>
    </div>
  </div>
</div>

.column {
    float: left;
}

.one-third {
    width: 33.33%;
}

#managers-row {
    width: 500px; /* Demo Only */
    text-align: center;
}

.screamer,
.kinzu,
.swezii {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #000; /* Demo Only */
    background-size: 100%;
}   

.screamer {
  background-image: url(../images/screamer.png);
}
.kinzu {
  background-image: url(../images/screamer.png);
}
.swezii {
  background-image: url(../images/screamer.png);
}

Answer 5

使用百分比，并删除DIV元素之间的空白区域（非常烦人）

JS Fiddle

.one-third-column {
    width: 33.333333333%;
    display: inline-block;
}

.one-third-column img {
    width: 100%;
    height: auto;
    background-color: red;
}

.one-third-column > div {
    padding: 15px 15px 15px 15px;
}

<div class="container"><div class="row" id="managers-row"><h4 id="managers-head">Our Managers</h4><div class="one-third-column"><div><img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/i02.png"></div></div><div class="one-third-column"><div><img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/i02.png"></div></div><div class="one-third-column"><div><img src="http://png-3.findicons.com/files/icons/1072/face_avatars/300/i02.png"></div></div></div></div>

Answer 6

其他答案都没有帮助。我最终在左对齐的div text-align:center;和 display:inline-block;上使用margin-right:10px;来居中中间div。最后，我使用int A[1024];来对齐正确的div。

强制导航栏保持在线

6 个答案: