div with unspecified width (absolute positioning)

Question

I\'ve got an absolutely positioned div I\'m working with, and I put some text inside of it just to be able to find it on the page, namely:

        
                      

              相关标签:
       
      

Answer 1

Try adding:

white-space: nowrap;

in your fixed positioned div. Beware, though, that this solution will not cause the lines to wrap when the div is smaller than the window's width.

Answer 2

I solved this by adding a wrapper div that is also absolutely positioned, with the width I want my div to expand up to.

E.g.,

<div class="wrapper">
    <div class="my-div"></div>
</div>

And css,

.wrapper {
    position: absolute;
    width: 500px;
}

.my-div {
    position: absolute;
    whitespace: pre-wrap;
}

You can add whitespace: pre-wrap to allow wrapping lines, which makes this more flexible than the nowrap solution.

Answer 3

I have this solution for that:

<style>

html * {
        margin: 0;
    }     

    body {
        color: #333333;
        font: 11px verdana,arial,helvetica,sans-serif;
    }

    #a1{
        position: relative;
        margin:10px;
        border:1px solid black;
        overflow:hidden;
    }

    #a1 img{
            max-width:700px;
    }

    #a2{
        position: absolute;
        right:5%;
        bottom:5%;
        border:1px solid white;
        color:#fff;
        font-size:2em;
        background:rgba(0,0,0,0.7);
        padding:10px;
    }
</style>
<div id='a1'>
        <img src="https://lh3.googleusercontent.com/-kx0cklvaX2A/VBgtKrx6FWI/AAAAAAAAAG4/4ZERNAeA5HI/s931-fcrop64=1,06480000ffc9ffff/pZhc7Fq5oX8.jpg" />

     <div id='a2'>
            <div>Your Text is flexible width</div>
            <hr/>
            <div>other text here</div>
        </div>
    </div>

http://jsfiddle.net/2hynguq9/2/

flexible text width ajustable to the div, enjoy

Answer 4

On the absolutely positioned element, add:

display: table;

.rel {
  position: relative;
  background-color: rgb(85 85 85 / 20%);
}

.abs {
  position: absolute;
  background-color: rgb(0 255 0 / 50%);
}

.table {
  display: table;
}

.fixed {
  position: fixed;
  background-color: rgb(3 169 244 / 46%);
}

div {
  font: 14px italic, sans-serif;
  border-radius: 5px;
  margin: 1em;
  padding: 1.5em;
  font-style: italic;
  border: 3px solid rgba(155, 155, 155, .4);
}

p {
  font-style: normal;
}

<div class="rel">(Relative Positioning)
  <div class="abs table">(Absolute Positioning; Display "table")
    <div class="fixed">(Fixed Positioning)<br/>
      <strong>Self-Sizing Popout Content</strong>
      <p>The width of this block expands based on content size, and escapes the bounds of its parent, yet its starting position is based on its location in the containing parent. This method of positioning can be used for popups that need to be anchored
        in a particular spot. </p>
      <div class="rel">(Relative Positioning)
        <div class="abs table">(Absolute Positioning; Display "table")<br/>
          <div class="fixed">(Fixed Positioning)
            <p><strong>
Now we're getting ridiculous
</strong><br/> A popup in a popup.<br/> This box expands based<br/> on content height &amp; width.
            </p>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Answer 5

It actually works fine for me. But try adding display: inline; to the div.

Answer 6

Try using the css attribute of "width:auto" on the div :)