Question

凌乱的标题，但我无法用其他方式来描述它。我试图做的是我有3个boex在一条线上，每边只有1个px边框，但是不能让它工作，它在最右边的一个总是2 px。怎么解决这个问题？

检查代码：

#content {
  width: 1016px;
  min-height: 664px;
  height: auto;
  border: 1px solid #232323;
  background-color: #12100e;
  float: left;
  padding: 0px;
}

#imagebox {
  Width: 338px;
  height: 221px;
  padding-right: 0px;
  padding-left: 0px;
  border-right: 1px solid #232323;
  border-bottom: 1px solid #232323;
}

<html>
  <head>
    <link rel="StyleSheet" href="Main.css" type="text/css">
    <title></title>
  </head>
  <body>
    <div id="mainbody">
      <div id="menu"></div>
      <div id="content">
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
      </div>
    </div>
  </body>
</html>

Answer 1

这是因为右边框将#pmagebox元素的整体宽度加1px，因此宽度为339px。

尝试将宽度减小到337px，

Answer 2

最近，你可以得到：

http://jsfiddle.net/CGEWC/2/

你必须记住几件事：

如果需要多次指定样式，请使用类而不是id。

在CSS中，您使用带有大写的宽度。虽然CSS不区分大小写，但将它全部写成小写更简洁。

我在您的图片框中添加了float: left;

我已经为你的div添加了第一个和最后一个类。不是最干净的代码，但应该说出来。

Answer 3

您是否尝试过使用max-width代替width？它允许缩小对象。如果需要距离任何一个只需1，它应该没问题，并将id更改为class，因为它们都是相同的。

3个浮动div在固定宽度的容器中，当三个与固定div woth边界相同时，div跳下

3 个答案: