如果所包含元素的尺寸太大，如何减小div的左边距？

debugcn 发表于 Dev

克里斯·伦戈

我的文字带有要为网络设置格式的方程式。这些方程采用嵌入式SVG的形式。在下面的示例中，我将其替换为固定大小的div。该SVG元素位于div显式包含SVG的内部。

这些方程式的左边距很小（在示例中为3em）。这是通过设置容器的边距来实现的div

大型方程式（太宽而无法容纳页面）需要缩小。我通过将svg max-width属性设置为100％完成此操作。但是，按比例缩小方程式看起来有些有趣，但保留了相对较大的左边界。因此，如果SVG的大小大于分配给它的100％宽度，我也希望减小此边距的大小。

我敢肯定有一个简单的方法可以完成此任务，但是我似乎找不到任何解决方案。

在下面的示例中，#equation2太宽了，并且被缩小了。如何减少包含div的边距？（如果我需要重新考虑HTML结构，也可以。）

html {
  background-color: red;
}
body {
  background-color: white;
  margin: 1em;
  width: 20em;
}
div.math {
  margin-left: 3em;
}
div.math div {
  max-width: 100%;
}

#equation1 {
  height: 1em;
  width: 8em;
  background-color: gray;
}
#equation2 {
  height: 1em;
  width: 30em;
  background-color: gray;
}

<html><body>
<p>Lorem ipsum...</p>
<div class='math'>
  <div id='equation1'></div>
</div>
<p>Lorem ipsum...</p>
<div class='math'>
  <div id='equation2'></div>
</div>
<p>Lorem ipsum...</p>
</body></html>

陪同Afif

使用flexbox并使用伪元素模拟边界，然后可以依靠收缩效果：

html {
  background-color: red;
}
body {
  background-color: white;
  margin: 1em;
  width: 20em;
}
div.math {
  display:flex;
}
div.math::before {
  content:"";
  flex-basis:3em;
  flex-shrink:3; /* control the shrink factor*/
  min-width:5px; /* define a min value*/
}

div.math > div {
  height: 1em;
  width: 8em;
  background-color: gray;
}

<p>Lorem ipsum...</p>
<div class='math'>
  <div id='equation1'></div>
</div>
<p>Lorem ipsum...</p>
<div class='math'>
  <div id='equation2' style="width:20em"></div>
</div>
<p>Lorem ipsum...</p>
<div class='math'>
  <div id='equation2' style="width:23em"></div>
</div>
<p>Lorem ipsum...</p>
<div class='math'>
  <div id='equation2' style="width:25em"></div>
</div>
<p>Lorem ipsum...</p>
<div class='math'>
  <div id='equation2' style="width:30em"></div>
</div>
<p>Lorem ipsum...</p>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。