如何使包裹的 div 元素“贴合” svg 元素？

Question

如何使包裹的 div 元素“贴合” svg 元素？

3

这个问题涉及到这个jsFiddle中显示的情况。

如您所见，目前包含svg元素(白色背景)的div（又名.svg-container；橙色背景）比它需要的宽度多约70像素。我能否在不使用任何JS的情况下使该

“缩小以适应”其内容？

编辑：为了明确起见，其余元素的形状和定位应保持不变。唯一需要改变的是.svg-container的形状，并且这应该是这样的：其右侧的橙色边沿与其他三个边沿的宽度相同。最终结果应该看起来像这样。（当然，为了创建第二个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 -->

- kjo

除非设置了宽度，否则Div将始终扩展以适应其父元素。在这种情况下，您可以在包含的td上设置width=50，或在.svg-container上设置width: 50px。 - brouxhaha

1

我确定我以前在SO上看到过这个答案。虽然我不知道原因，但在这里你无能为力。如果您删除足够多的SVG，使其不再包装，则它将按您的期望工作：http://jsfiddle.net/P9pq7/2/ - cimmanon

你是想要显示背景颜色还是用于调试目的？ - brouxhaha

2个回答

2

编辑我刚刚注意到你的最终结果fiddle。

选项1

这里有一个感觉相当hacky的选项：http://jsfiddle.net/P9pq7/7/ 将.svg-container更改为没有样式的span。在svg中添加border: 1px solid orange; margin-top: -6px;，并在svg:first-child中添加margin-top: 0 - 在FF、Chrome和Safari中有效。

或者

选项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;
}

选项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 上设置显式宽度，您可以在 svg 上设置 clear: both; display: block 来实现此目的：http://jsfiddle.net/P9pq7/4/

- brouxhaha

不需要使用 <span>，你可以直接将 div 行内显示。 - Rudie

没错。虽然一个 span 已经是 display: inline，所以这就少了一条 CSS 声明。不过在那种情况下，我想我们可以干脆把元素删掉。 - brouxhaha

如果需要背景，则无法删除它。不确定 OP 想要实现什么目标。最终结果看起来很奇怪。 - Rudie

在我的回答中的选项1实际上是一个不必要的元素。 - brouxhaha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidpauljunior · Accepted Answer

如果您将float:left添加到svg，然后将overflow:hidden添加到容器中（使背景显示），最后并且所有的关键是在:nth-child(odd)选择器中添加clear:both来清除每个第2个浮动的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/