Question

此问题涉及此jsFiddle中显示的情况。

正如您所看到的，目前，包含div元素（白色背景）的.svg-container（又名svg;橙色背景）比它需要的宽约70px。我可以使用 no JS让这个div“缩小到适合”它的内容吗？

编辑：为了清楚起见，其余元素的形状和位置应保持不受变化的影响。唯一应该改变的是形状.svg-container，这应该是沿着它的右侧的橙色边缘具有与沿着其他三个边的相同宽度的方式。最终结果应该看起来像<{3}}一样。（当然，要生成第二个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

修改我刚刚注意到你的最终结果。

选项1

这是一个让人感到非常hacky的选项：http://jsfiddle.net/P9pq7/7/ 将.svg-container更改为没有样式的范围。将border: 1px solid orange; margin-top: -6px;添加到svg和margin-top: 0添加到svg:first-child - 适用于FF，Chrome和Safari

OR

选项2（优于选项1）

http://jsfiddle.net/eerLa/5/：使用css
在你的td中创建一个表
使用以下样式：

.svg-container { line-height:0; display: table; border-collapse: collapse; } svg { display: table-cell; border: 1px solid orange; margin: 0; padding: 0; }

OR

选项3（如果您不喜欢表格）

http://jsfiddle.net/P9pq7/10/

.svg-container { line-height:0; font-size: 0; } svg { display: inline-block; padding: 1px; background: orange; } svg:nth-child(even) { clear: right; }

原始回答

如果不在包含div或td上设置显式宽度，您可以在clear: both; display: block上设置svg来执行此操作：http://jsfiddle.net/P9pq7/4/

Answer 2

如果您将float: left添加到svg（s）然后overflow: hidden添加到容器（这样背景显示），然后最后，以及所有密钥，添加{{ 1}}到clear:both选择器清除浮动的每个第二个svg。

:nth-child(odd)

<强> http://jsfiddle.net/eerLa/7/

如何将div包装为“拥抱”svg元素？

2 个答案: