Wie macht man div nicht größer als sein Inhalt?
Ich habe ein Layout ähnlich dem folgenden:
<div>
<table>
</table>
</div>
Ich möchte, dass der div nur so breit wird, wie mein table wird.
Die Lösung besteht darin, div auf display: inline-block zu setzen.
Sie möchten ein Block-Element, das die von CSS als "auf Größe verkleinert" bezeichnete Breite hat, und die Spezifikation bietet keine gesegnete Möglichkeit, um so etwas zu erhalten. In CSS2 ist das Verkleinern kein Ziel, sondern bedeutet, mit einer Situation umzugehen, in der der Browser "eine Breite aus dem Nichts herausholen" muss. Diese Situationen sind:
- float
- absolut positioniertes Element
- inline-Block-Element
- tabellenelement
wenn keine Breite angegeben ist. Ich habe gehört, sie überlegen, was Sie in CSS3 hinzufügen wollen. Machen Sie sich vorerst mit einem der oben genannten zufrieden.
Die Entscheidung, das Feature nicht direkt verfügbar zu machen, mag seltsam erscheinen, aber es gibt einen guten Grund. Es ist teuer. Auf Größe verkleinern bedeutet, mindestens zweimal zu formatieren: Sie können ein Element erst formatieren, wenn Sie seine Breite kennen, und Sie können die Breite nicht berechnen, ohne den gesamten Inhalt zu durchlaufen. Außerdem muss das Element nicht so oft aufgeschrumpft werden, wie man denkt. Warum brauchst du extra Div um deinen Tisch? Vielleicht ist die Tabellenüberschrift alles, was Sie brauchen.
Ich denke mit
display: inline-block;
würde funktionieren, aber ich bin mir nicht sicher über die Browser-Kompatibilität.
Eine andere Lösung wäre, Ihr div in ein anderes div zu verpacken (wenn Sie das Blockverhalten beibehalten möchten):
HTML:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
display: inline-block fügt Ihrem Element einen zusätzlichen Rand hinzu.
Ich würde dies empfehlen:
#element {
display: table; /* IE8+ and all other modern browsers */
}
Bonus: Sie können das schicke neue #element jetzt auch ganz einfach zentrieren, indem Sie margin: 0 auto hinzufügen.
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
Foo Hack - Cross Browser-Unterstützung für Inline-Block-Styling (2007-11-19) .
Was für mich funktioniert ist:
display: table;
in der div. (Getestet auf Firefox und Google Chrome).
Sie können versuchen fit-content (CSS3):
_div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
_Es gibt zwei bessere Lösungen
display: inline-block;OR
display: table;
Von diesen beiden ist display:table; besser, weil display: inline-block; eine zusätzliche Marge hinzufügt.
Für display:inline-block; können Sie die negative Randmethode verwenden, um den zusätzlichen Platz zu korrigieren
Die Antwort auf Ihre Frage liegt in der Zukunft, mein Freund ...
"intrinsic" kommt nämlich mit dem neuesten CSS3-Update
width: intrinsic;
leider ist IE dahinter, so dass es es noch nicht unterstützt
Weitere Informationen: CSS-Modul für intrinsische und extrinsische Dimensionierung, Stufe und Kann ich verwenden? : intrinsische und extrinsische Dimensionierung .
Für den Moment musst du mit <span> oder <div> zufrieden sein
display: inline-block;
Ich weiß nicht, in welchem Kontext dies erscheinen wird, aber ich glaube, dass die CSS-artige Eigenschaft float entweder left oder right diesen Effekt haben wird. Auf der anderen Seite wird es auch andere Nebenwirkungen haben, wie z. B. das Schwebenlassen von Text.
Bitte korrigieren Sie mich, wenn ich falsch liege. Ich bin mir nicht 100% sicher und kann es derzeit nicht selbst testen.
width:1px;
white-space: nowrap;
funktioniert gut für mich :)
Eine CSS2-kompatible Lösung besteht darin, Folgendes zu verwenden:
.my-div
{
min-width: 100px;
}
Sie können Ihr div auch floaten lassen, wodurch es so klein wie möglich wird, aber Sie müssen ein clearfix verwenden, wenn etwas in Ihrem div floatet:
.my-div
{
float: left;
}
OK, In vielen Fällen müssen Sie gar nichts tun, da div standardmäßig height und width als auto definiert hat. Wenn dies nicht der Fall ist, wird inline-block angezeigt Werde für dich arbeiten ... schau dir den Code an, den ich für dich erstelle und er macht das, wonach du suchst:
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>Dies wurde in Kommentaren erwähnt und ist in einer der Antworten so schwer zu finden:
Wenn Sie display: flex aus irgendeinem Grund verwenden, können Sie stattdessen Folgendes verwenden:
div {
display: inline-flex;
}
Sie können dies einfach mit display: inline; (oder white-space: nowrap;) tun.
Ich hoffe, Sie finden das nützlich.
<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>
Ich weiß, dass die Leute manchmal keine Tische mögen, aber ich muss dir sagen, ich habe die CSS-Inline-Hacks ausprobiert und sie funktionierten in einigen Divs, in anderen jedoch nicht. Es war also wirklich einfacher, die expandierende Div in aufzunehmen Eine Tabelle ... und ... kann die Inline-Eigenschaft haben oder nicht, und dennoch ist die Tabelle diejenige, die die Gesamtbreite des Inhalts enthält. =)
Sie können inline-block als @ user473598 verwenden, achten Sie jedoch auf ältere Browser.
/* Your're working with */
display: inline-block;
/* For IE 7 */
zoom: 1;
*display: inline;
/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;
Mozilla unterstützt überhaupt keinen Inline-Block, aber sie haben -moz-inline-stack, was ungefähr gleich ist
Einige browserübergreifende Anzeigeattribute für inline-block: https://css-tricks.com/snippets/css/cross-browser-inline-block/
Sie können einige Tests mit diesem Attribut in sehen: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Fügen Sie einfach einen Stil in Ihre CSS-Datei ein
div {
width: fit-content;
}
Eine funktionierende Demo ist da-
.floating-box {
display:-moz-inline-stack;
display: inline-block;
width: fit-content;
height: fit-content;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}<h2>The Way is using inline-block</h2>
Supporting elements are also added in CSS.
<div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
</div>Meine CSS3 flexbox -Lösung in zwei Varianten: Die oberste verhält sich wie ein Span und die unterste wie ein Div. Mit Hilfe eines Wrappers nimmt sie die gesamte Breite ein. Ihre Klassen sind "top", "bottom" und "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.Versuchen Sie display: inline-block;. Um Cross-Browser-kompatibel zu sein, verwenden Sie bitte den folgenden CSS-Code.
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><div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
Dadurch wird die übergeordnete div-Breite mit der größten Elementbreite identisch.
Beim Herumspielen mit Firebug habe ich den Eigenschaftswert -moz-fit-content gefunden, der genau das tut, was das OP wollte und wie folgt verwendet werden könnte:
width: -moz-fit-content;
Obwohl es nur unter Firefox funktioniert, konnte ich für andere Browser wie Chrome keine Entsprechung finden.
Für das div -Element können Sie eine der beiden folgenden Methoden verwenden:
display: table;
oder,
display: inline-block;
Ich bevorzuge die Verwendung von display: table;, da alle zusätzlichen Leerzeichen von selbst behandelt werden. Während display: inline-block zusätzliche Platzhalter benötigt.
Ich habe ein ähnliches Problem gelöst (bei dem ich display: inline-block nicht verwenden wollte, weil das Element zentriert war), indem ich ein span -Tag in das div -Tag eingefügt und die CSS-Formatierung von verschoben habe das äußere div Tag zum neuen inneren span Tag. Wirf dies einfach als eine andere alternative Idee raus, wenn display: inline block keine passende Antwort für dich ist.
div{
width:auto;
height:auto;
}
Überarbeitet (funktioniert, wenn Sie mehrere Kinder haben): Sie können jQuery verwenden (siehe JSFiddle-Link)
var d= $('div');
var w;
d.children().each(function(){
w = w + $(this).outerWidth();
d.css('width', w + 'px')
});
Vergessen Sie nicht, die jQuery einzuschließen ...
Wenn Sie Container haben, die Zeilen umbrechen, nach Stunden nach einer guten CSS-Lösung suchen und keine finden, verwende ich stattdessen 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>Ich würde nur padding: -whateverYouWantpx; einstellen
Ich habe div.classname{display:table-cell;} ausprobiert und es hat funktioniert!
Sie können display: flex als übergeordnetes Element verwenden
#parentElement {
display: flex;
flex-direction: column;
align-items: flex-start;
}
Sie können diesen Code ausprobieren. Folgen Sie dem Code im CSS-Abschnitt.
div {
display: inline-block;
padding: 2vw;
background-color: green;
}
table {
width: 70vw;
background-color: white;
}<div>
<table border="colapsed">
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
</table>
</div>Was ist, wenn wir eine globale Variable definieren und diese für beide verwenden?.
:root {
--table-width: 400px;
}
.container{
width:var(--table-width);
border: 1px solid black; // easy visualization
}
.inner-table {
width:var(--table-width);
border: 1px solid red; // easy visualization
}<div class="container">
<table class="inner-table">
<tr>
<td>abc</td>
</tr>
</table>
</div>Ich habe ein span in einem div und habe gerade margin: auto für den Container div eingestellt.
Persönlich mache ich das einfach:
HTML Quelltext:
<div>
<table>
</table>
</div>
CSS Code:
div {
display: inline;
}
Wenn Sie ein Gleitkomma auf Ihr div anwenden, funktioniert es auch, aber offensichtlich müssen Sie beim nächsten HTML-Element die CSS-Regeln "clear both" anwenden.
Einfach
<div style="display: inline;">
<table>
</table>
</div>