html - paragrafo - overflow css cos'è




Come rendere div non più grande del suo contenuto? (20)

Avrei appena impostato il padding: -whateverYouWantpx;

Ho un layout simile a:

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

Mi piacerebbe che il div si espandesse al massimo come il mio table .


Basta inserire uno stile nel tuo file CSS

div { 
    width: fit-content; 
}

Ciò che funziona per me è:

display: table;

nel div (Testato su Firefox e Google Chrome ).


Ho provato div.classname{display:table-cell;} e ha funzionato!


La mia soluzione flexbox CSS3 in due versioni: quella in alto si comporta come una span e quella in basso si comporta come un div, prendendo tutta la larghezza con l'aiuto di un wrapper. Le loro classi sono rispettivamente "top", "bottom" e "bottomwrapper".

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}
Is this
<div class="top">
	<table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
    	<table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.



Manomandando con Firebug ho trovato il valore della proprietà -moz-fit-content che fa esattamente ciò che l'OP voleva e poteva essere usato come segue:

width: -moz-fit-content;

Sebbene funzioni solo su Firefox, non sono riuscito a trovare alcun equivalente per altri browser come Chrome.


Non sapendo in quale contesto questo apparirà, ma credo che la proprietà di stile CSS a left oa right abbia questo effetto. D'altra parte, avrà anche altri effetti collaterali, come il permettere al testo di fluttuare intorno ad esso.

Per favore, correggimi se sbaglio, non sono sicuro al 100% e al momento non posso testarlo da solo.


Possiamo usare uno dei due modi sull'elemento div :

display: table;

o,

display: inline-block; 

Preferisco usare display: table; , perché gestisce tutti gli spazi in più da solo. Durante la display: inline-block richiede un po 'di spazio aggiuntivo.


Prova a display: inline-block; . Per essere compatibile con browser incrociati, utilizzare il codice css sottostante.

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}
<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>



Puoi usare inline-block come @ user473598, ma fai attenzione ai browser più vecchi ..

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla non supporta affatto il blocco inline, ma ha -moz-inline-stack che è quasi lo stesso

Alcuni cross-browser attorno all'attributo display inline-block : https://css-tricks.com/snippets/css/cross-browser-inline-block/

Puoi vedere alcuni test con questo attributo in: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/


Revisionato (funziona se hai più bambini): puoi usare jQuery (Guarda il link JSFiddle)

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

Non dimenticare di includere il jQuery ...

Vedi il JSfiddle qui


Se si dispone di contenitori che rompono le linee, dopo ore alla ricerca di una buona soluzione CSS e non trovando nessuno, ora utilizzo invece jQuery:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});
nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>


Una soluzione compatibile con CSS2 deve essere utilizzata:

.my-div
{
    min-width: 100px;
}

Puoi anche spostare il tuo div che lo costringerà il più piccolo possibile, ma dovrai usare un clearfix se qualcosa all'interno del tuo div è mobile:

.my-div
{
    float: left;
}

Volete un elemento di blocco che abbia ciò che i CSS chiamano ridimensionamento della larghezza e la specifica non fornisce un modo benedetto per ottenere una cosa del genere. Nei CSS2, il rimpicciolimento non è un obiettivo, ma significa affrontare una situazione in cui il browser "deve" ottenere una larghezza dal nulla. Quelle situazioni sono:

  • galleggiante
  • elemento assolutamente posizionato
  • elemento di blocco in linea
  • elemento di tabella

quando non è specificata la larghezza. Ho sentito che pensano di aggiungere quello che vuoi in CSS3. Per ora, accontentati di uno dei precedenti.

La decisione di non esporre direttamente la funzione può sembrare strana, ma c'è una buona ragione. È costoso. Shrink-to-fit significa formattazione almeno due volte: non è possibile iniziare la formattazione di un elemento finché non si conosce la sua larghezza e non è possibile calcolare la larghezza senza l'intero contenuto. Inoltre, uno non ha bisogno di elementi restringibili per adattarsi tutte le volte che si può pensare. Perché hai bisogno di div extra intorno al tuo tavolo? Forse la didascalia della tabella è tutto ciò di cui hai bisogno.


OK, in molti casi non hai nemmeno bisogno di fare nulla dato che il div di default ha height e width come auto, ma se non è il tuo caso, l'applicazione inline-block display a inline-block funzionerà per te ... guarda il codice che creo per te e fa quello che stai cercando:

div {
  display: inline-block;
}
<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>



<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>

    <div id="content_lalala">
        this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
    </div>

</td>
</tr>
</table>

So che a volte alle persone non piacciono i tavoli, ma devo dirtelo, ho provato gli hack in linea css e hanno funzionato in alcune div, ma in altri no, quindi è stato davvero più semplice racchiudere il div in espansione una tabella ... e ... può avere o meno la proprietà inline e comunque il tavolo è quello che terrà la larghezza totale del contenuto. =)


div{
  width:auto;
  height:auto;
}




width