0

To my understanding, if a div's width and height properties are not defined, the Parent div will equal the result of the arranged children elements width and height properties added collectively (and respectively).

My current set up is like so:

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

My problem is that the widths of the element divs are not getting set (or updated) correctly. The width of the div should be the width of the child SVG (as it is the widest), and the height of the div should be the height of the child divs (2 of them) and the height of the SVG.

Here is the fiddle of the example. You will notice that the bar example is being cut off. This div's computed width is 300, despite its SVG is larger (drag to see the remaining portion)

JQ-UI is in play, so after a user manipulates the size of on representation, the others will re-render themselves. If we can figure out why the div is rendering to 300px, then it will also fix the re-rendering, since it will be based on its children elements.

It appears that the issue might also be with the SVGs themselves. I have not defined the width and height properties on the SVG, rather I did so on the CSS. If I manipulate the SVG width propertuy on resize, it appears to potentially work, but I am still uynsure of why the SVG's width is not calcualated and then fit into the div.

4

4 回答 4

0

The problem is that you get div wrong. Div elements are block elements and block elements expand to the width of parent width.

You could use flex box model.

Use inline-box.

Use Jquery to define width.

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

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

then

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;
}
于 2013-08-28T17:45:34.993 回答
0

When a <div> does not have its width and height defined, both properties are set to auto.

When a block-level element, like <div>, has a width of auto, it will expand to the available horizontal space in its containing element. If its children are wider, than the specification says they should protrude out, but they won't affect the width of the parent. (There was a nasty IE bug back in the day that didn't follow this specification that made floated layouts very difficult to implement).

When a block-level element, like <div>, has a height of auto, it will expand vertically to contain all of its children that are in document flow.

You'll need to change the default behaviour. For each parent you want to expand, and each of its children, you will need to apply display:inline-block;

 div.parent, div.child1, div.child2{
       display:inline-block;
 }
于 2013-08-28T17:46:56.533 回答
0

Your problem lies with div measure-container-c30.

It has class with width being set to 89%.

Which is weird if you want space around the div use margin.

Do this:

  1. Remove all width style on measurec29 div.
  2. Remove width: 89%; overflow: auto; on measure-container-c30 div.
  3. Remove width on measure-rep-container-c29 div.
于 2013-08-29T01:53:30.100 回答
0

The problem does lie with the SVG. The attribute must be defined within the HTML tag inline, not by CSS. This seems weird, but by setting the SVG attributes here, JQ-UI will then adjust the SVG property here, but if there wasn't one to begin with, the browser determines its original dimensions.

<div> //container
  <div> //list of each element
    <div> // element 1
      <svg width="300px" height="100px"></svg>
    </div>
    ....
于 2013-09-07T13:33:05.507 回答