开发者

making the div width stretch to fit its contents

I have the following html code:

<table>
  <tr>
    <td>
      <div id="fixmywidth" style="position:relative; height:30px;">
        <div style="z-index: 2000; margin-top: 5px; height: inherit; position: absolute;">
          <table style="height:inherit">
            <tr style="height:inherit">
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              ........300 tds later
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</开发者_JAVA技巧td>
            </tr>
          </table>
        </div>
      </div>
    </td>
  </tr>
</table> 

how do i make the div with the id "fixmywidth" width fit the width of the containing elemets? i tried width=100% and widht = auto but they wouldn't work thanks a trillion in advance, Lina


This is not possible because the div inside it is not actually inside it, because of the position relative/absolute.

Im not 100% sure what you are trying to accomplish there but if you remove those 2 it will size properly.


By "containing elements," do you mean the elements that contain <div id="fixmywidth"></dIv>, or the elements contained within <div id="fixmywidth"></div>?

If it's the latter, Fabian is right, and the issue lies here:

<div style="z-index: 2000; margin-top: 5px; height: inherit; position: absolute;">

position: absolute; takes the <div> out of the document flow, so it takes up no space. Therefore, its containing element (<div id="fixmywidth"></div>) doesn't encompass any elements in the document flow, and therefore has no dimensions.

You can fix that by removing position: absolute;, but that may not fall in line with your layout goals.


remove position absolute from the immediate child of fixmywidth


if you remove position:relative from 'fixmywidth', it should work.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜