css: evita la larghezza del div dall'ampliamento alla larghezza disponibile

Come impedire l'espansione di div? Voglio div con elementi per non occupare il 100% dello spazio disponibile e avere la larghezza che hanno i bambini. Ho bisogno di questo per centrare il genitore div orizzontalmente. Il trucco è che gli elementi figlio devono condividere float: left o diplay: inline-block e fluid width, quindi ci possono essere poche righe di elementi figlio.css: evita la larghezza del div dall'ampliamento alla larghezza disponibile

Non riesco a racchiudere ogni riga in un proprio div poiché interromperà il design reattivo.

fonte

2013-08-08 vlad

c'è diverse possibilità: 'display: inline-blocco-è buono per questo (essere a conoscenza del [IE7 incidere] (http://stackoverflow.com/a/6545033/870729)) –

Impostare 'display: inline-block' sul padre e avvolgerlo in un contenitore ha' text-align: center; ' –

Dato che sembra un problema banale, potrebbe essere utile mostrare il tuo codice HTML in modo da poter vedere cosa sfida che stai affrontando. – isherwood

hai provato a utilizzare display: inline-bock? DIV occuperà il 100% della larghezza perché sono elementi di blocco.

fonte

2013-08-08 19:43:56 mitch

+11

Questo dovrebbe essere un commento. – defaultNINJA

Questo farà collassare il div ma non sarà (facilmente) centrato. –

È necessario utilizzare display: table; Si ridurrà alle dimensioni del suo contenuto e può anche essere centrato e posizionato senza dover assegnare una larghezza determinata.

DEMO http://jsfiddle.net/kevinPHPkevin/9VRzM/

fonte

2013-08-08 19:49:41 Vector

prova l'impostazione float: left o display: inline-block per elementi figlio, causerà problemi – vlad

@vlad Ho effettivamente provato a impostare 'float: left' e' display: inline-block' e non vedo alcun problema. In queste situazioni, il contenitore padre si espanderà il più possibile per consentire agli elementi secondari di riempire la larghezza disponibile. È possibile limitare la larghezza utilizzando la proprietà di larghezza massima per il contenitore padre. –

si espande ancora quando più testo – IHeartAndroid

Se si vuole veramente il genitore div a crollare attorno ai suoi elementi secondari (per qualsiasi motivo, in base a ciò che si sta cercando di realizzare) e quindi si vuole centrare quel div, quindi @ vettore di la risposta è azzeccata, usa display: table con margin: 0 auto.

Se è ok per il div rimanere espanso per l'intera larghezza del contenitore in cui si sta tentando di centrare i propri figli, allora si dispone di almeno un paio di altre opzioni, di nuovo a seconda della situazione particolare.

È possibile utilizzare text-align: center.

.content { 
 
    text-align: center; 
 
    border-style: solid; 
 
    border-width: thin; 
 
} 
 

 
.content span { 
 
    display: inline; 
 
    border-style: solid; 
 
    border-width: thin; 
 
}

<div class="content"> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div>

Si potrebbe anche usare il più recente display: flex con justify-content: center, a seconda del livello di compatibilità del browser si sta sostenendo, naturalmente.

.content { 
 
    display: flex; 
 
    justify-content: center; 
 
    border-style: solid; 
 
    border-width: thin; 
 
} 
 

 
.content div { 
 
    border-style: solid; 
 
    border-width: thin; 
 
}

<div class="content"> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div>

fonte

2017-06-24 17:16:04

css: evita la larghezza del div dall'ampliamento alla larghezza disponibile

risposta

Problemi correlati