html - 去掉外边框间距，保留内边框间距，确保中间div保持一定大小

Question

希望有人能帮助我。我需要确保左侧透明背景保持在 50% 并自动调整大小，我还需要确保蓝色中间 div 的宽度固定为 328px(无论屏幕分辨率如何)。最右边的div需要在页面右侧保持肉感，并自动调整。

我决定为 div 使用表格单元格并在单元格周围放置边框间距，但我只想要 div 之间的间距。在 div 周围添加边框间距我现在在表格的左侧和右侧有 10px。

那么我哪里做错了，我怎样才能达到我想要的结果呢？如果您认为它不是我想要实现的目标的最佳选择，我愿意更改我的代码。

这是我现在的代码(我更改了背景颜色以便您可以看到框和边框间距):http://jsfiddle.net/7we2H/8/

<div class="headercontent">

  <div id="mid_lft">LEFT DIV</div><!--mid_lft-->
  <div id="mls">MID DIV</div><!--mls-->
  <div id="mid_rht">RIGHT DIV</div><!--mid_rht-->

</div><!--header_content-->


.headercontent{width:100%; height:213px; display:table; position:relative; border- spacing:10px; margin:0 auto;}<br/><br/>
.headercontainer{position:relative;}

.headercontent > div{display:table-cell; height:213px; border:0px !important;}<br/><br/>
.mid_lft{background:#f03; width:50%; margin-right:10px;}<br/><br/>
.logo{ position:relative; float:right; top:40px; right:29px;}<br/><br/>
.mls{background:#36F; width:50px; margin-right:10px;}
.mid_rht{background:#f03; width:25% }

这里还有一个链接，指向我已有的代码所输出的内容:http://evansmithrealestate.com/home.php

Answer 1

您可以通过将 border-collapse: collapse 添加到 .headercontent 来移除边框。此外，您还可以添加 table-layout: fixed 以设置中间元素的宽度。

Updated Example

.headercontent {
    border-collapse: collapse;
    table-layout: fixed;
}
#mls {
    width:328px;
}

---

如果你想保留内边框，你总是可以添加一个 border-left 到每个元素，然后删除第一个 的 border-left div 元素:

Example Here

.headercontent > div {
    display:table-cell;
    height:213px;
    border-left:10px solid #fff;
}
.headercontent > div:first-child {
    border:none;
}

---

如果您需要边框是透明的，那么您必须添加一个等于 border-spacing 属性的负 margin-left 值 - 在这种情况下， margin-left:-10px。然后，您需要为表格指定宽度 100% + 2 * border-spacing。因此，您可以使用 calc() : 宽度:calc(100% + 20px)。确保也隐藏父元素的溢出。

Example Here

.headercontent {
    width:calc(100% + 20px);
    display:table;
    border-spacing:10px;
    table-layout: fixed;
    margin-left:-10px;
}