Question

据我了解，如果没有定义div的width和height属性，Parent div将等于排列的子元素width和height属性的结果（统称分别添加）。

我目前的设置是这样的：

<div> //container
  <div> //list of each element
    <div> // element 1
      ... children comprised of on SVG and a few other divs
    </div>
    <div> // element 2
      ... children comprised of on SVG and a few other divs
    </div>
    <div> // element 3
      ... children comprised of on SVG and a few other divs
    </div>
    …etc…
  </div>
</div>

我的问题是元素div的width未正确设置（或更新）。 div的宽度应该是子SVG的宽度（因为它是最宽的），div的高度应该是子div的高度（其中2个）和SVG的高度。

以下是该示例的fiddle。您会注意到栏示例正在被切断。该div的计算宽度为300，尽管其SVG较大（拖动以查看剩余部分）

JQ-UI正在发挥作用，因此在用户操作on表示的大小后，其他人将重新渲染自己。如果我们可以弄清楚为什么div渲染到300px，那么它也将修复重新渲染，因为它将基于其子元素。

似乎问题也可能出在SVG本身。我没有在SVG上定义宽度和高度属性，而是在CSS上这样做。如果我在调整大小时操纵SVG宽度属性，它似乎可能有效，但我仍然不清楚为什么SVG的宽度不计算然后适合div。

Answer 1

问题是你得错了。 Div元素是块元素，块元素扩展到父宽度的宽度。

您可以使用弹性盒模型。

使用内联框。

使用Jquery定义宽度。

http://fiddle.jshell.net/DVhQA/

<div class='m'> 
  <div></div>
  <div></div>
</div>

然后

div {
    border:solid;
    /* overflow:auto; */
    display:inline-block;
}

div>div {
    margin:10px;
    float:left;
    clear:both;
    height:50px;
    width:200px;
    background-color:red;
}
div>div:first-of-type{
    width:500px;
    background-color:yellow;
}

Answer 2

如果<div>没有定义宽度和高度，则两个属性都设置为auto。

当块级元素（如<div>）的宽度为auto时，它将扩展到其包含元素中的可用水平空间。如果它的孩子比较宽，那么规格说它们应该突出，但它们不会影响父母的宽度。（当天有一个讨厌的IE漏洞没有遵循这个规范，这使得浮动布局很难实现）。

当块级元素（如<div>）的高度为auto时，它将垂直展开以包含文档流中的所有子级。

您需要更改默认行为。对于要展开的每个父级及其每个子级，您需要应用display:inline-block;

 div.parent, div.child1, div.child2{
       display:inline-block;
 }

Answer 3

你的问题在于measure-container-c30。

它的宽度设置为89％。

如果你想要div周围的空间使用 margin。

，这很奇怪

这样做：

删除measurec29 div。
删除width: 89%; div。

overflow: auto;

measure-container-c30

删除measure-rep-container-c29 div。

Answer 4

问题在于SVG。该属性必须在HTML标记内联中定义，而不是由CSS定义。这看起来很奇怪，但是通过在此处设置SVG属性，JQ-UI将在此处调整SVG属性，但如果没有开始，则浏览器确定其原始尺寸。

<div> //container
  <div> //list of each element
    <div> // element 1
      <svg width="300px" height="100px"></svg>
    </div>
    ....

让父div的宽度等于最宽的子元素/ div

4 个答案: