时间戳

首页 > 解决方案 > 如果包含的元素的大小太大，如何减少 div 的左边距？

html - 如果包含的元素的大小太大，如何减少 div 的左边距？

问题描述

我有要为网络格式化的带有方程式的文本。这些方程采用嵌入式 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>

标签： htmlcss

解决方案

使用 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>

推荐阅读