强制导航栏保持在线

Question

我正在尝试为我的网站制作一个关于页面。我试图在一个 div 中居中 3 个图像，在页面上均匀分布，使用 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 中使用 center 标签，并移除 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 {
    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 上使用了 margin-left:10px;，text-align:center; 和 display:inline-block; 使中间的 div 居中。最后我使用了margin-right:10px; 来对齐右侧的 div。