Ich habe ein ähnliches Layout:
<div>
<table>
</table>
</div>Ich möchte, dass die div nur so weit ausdehnen, wie mein table wird.
Antworten
Zu viele Anzeigen?
Coder_Naveed
Punkte
191
Setzen Sie einfach die Breite und Höhe auf fit-content. Es ist sehr einfach.
div {
width: fit-content;
height: fit-content;
padding: 10px;
}Ich füge hinzu Polsterung: 10px; Wird sie weggelassen, bleibt das div-Element vollständig an der Tabelle haften und wirkt etwas unbeholfen. Padding schafft den nötigen Abstand zwischen dem Rand des Elements und seinem Inhalt. Aber es ist Ihr Wunsch, nicht zwingend.
Showrin Barua
Punkte
1661
Sie können diesen Code ausprobieren. Folgen Sie dem Code im Abschnitt CSS.
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>
Codemaker
Punkte
7272
Versuchen Sie zu verwenden width: max-content Eigenschaft, um die Breite des Divs an die Größe seines Inhalts anzupassen.
Versuchen Sie dieses Beispiel,
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
width: max-content;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>
</body>
</html>
miksiii
Punkte
2398
RPichioli
Punkte
3085
Sie können verwenden inline-block wie @user473598, aber Vorsicht bei älteren Browsern..
/* 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 Inline-Block überhaupt nicht, aber sie haben -moz-inline-stack was ungefähr dasselbe ist
Einige Cross-Browser um inline-block Attribut anzeigen: 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/
109 Stimmen
Der Effekt wird "shrinkwrapping" genannt, und wie bereits erwähnt, gibt es mehrere Möglichkeiten, dies zu tun (float, inline, min/max-width), die alle verschiedene Nebeneffekte haben
1 Stimmen
Keine der unten aufgeführten Antworten hat bei mir funktioniert, außer:
display: table-OR-height: fit-content!!!