css - 如何将 div 包装到 "hug"svg 元素？

Question

本题指的是这个jsFiddle中所示的情况.

如您所见，当前包含 svg 元素(白色背景)比它需要的宽度大约 70px。我可以使用 no JS 让这个 div 使其内容“收缩以适合”吗？

编辑:为了清楚起见，其余元素的形状和位置应不受更改的影响。唯一应该改变的是 .svg-container 的形状，它的右侧橙色边缘与其他三个边缘的宽度相同。最终结果应该看起来像this . (当然，为了生成第二个 jsFiddle，我必须显式设置 .svg-container 的宽度，这不是我正在寻找的解决方案。我正在寻找 CSS这将转化为“超出内容的右边缘与超出其他三个边缘的量相同。”)

---

现在，强制性源代码:

*{
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
  margin:0;
  font-family:consolas,monaco,courier,monospace;
}

.centered{
  max-width:280px;
  background-color:red;
  padding:15px;
  margin:0 auto;
}
.content{
  width:100%;
  color:#8f8;
  background-color:#333;
}
table td:first-child{
  width:75px;
}
.svg-container{
  line-height:0;
  background-color:orange;
}
svg{
  margin:1px;
}
rect {
  shape-rendering:crispEdges;
  stroke:none;
  fill:white;
}
td{
  vertical-align:top;
}

<div class="centered">
  <div class="content">
    <table><tr>
      <td>
        <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum, lectus ut consectetur mattis,</p></div>
      </td>
      <td>
        <div class="svg-container">
          <svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg>
        </div>
      </td>
    </tr></table>

  </div> <!-- .content -->
</div> <!-- .centered -->

Answer 1

如果您将 float: left 添加到 svg，然后将 overflow: hidden 添加到容器(因此背景显示)，最后，以及这一切的关键，将 clear:both 添加到 :nth-child(odd) 选择器以清除 float 中的每个第二个 svg。

/* Stuff I've added to your CSS */

.svg-container {
    overflow: hidden;
}
svg {
    float: left;
}
svg:nth-child(odd) {
    clear: left;
}

http://jsfiddle.net/eerLa/7/