verzerren - html body größe festlegen




Wie div nicht größer als sein Inhalt machen? (20)

Ü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 ...

Siehe JSfiddle hier

Ich habe ein Layout ähnlich dem:

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

Ich möchte, dass sich das div nur so weit ausdehnt, wie mein table wird.


Bei Firebug habe ich den Property-Wert -moz-fit-content der genau das tut, was das OP wollte und könnte wie folgt verwendet werden:

width: -moz-fit-content;

Obwohl es nur mit Firefox funktioniert, konnte ich keine Entsprechung für andere Browser wie Chrome finden.


Die Lösung besteht darin, Ihr div zur display: inline-block .


Eine CSS2-kompatible Lösung ist zu verwenden:

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

Sie können auch Ihr div floaten, was es so klein wie möglich macht, aber Sie müssen ein clearfix wenn etwas in Ihrem div schwebt:

.my-div
{
    float: left;
}

Einfach

<div style="display: inline;">
    <table>
    </table>
</div>

Es gibt zwei bessere Lösungen

  1. display: inline-block;

    ODER

  2. display: table;

Aus diesen zwei display:table; ist besser.

Zur display:inline-block; Sie können die Methode "Negative Margin" verwenden, um den zusätzlichen Speicherplatz zu fixieren


Ich habe ein ähnliches Problem gelöst (wo ich display: inline-block nicht verwenden wollte display: inline-block weil das Element zentriert war), indem ich ein span Tag innerhalb des div Tags hinzufüge und die CSS-Formatierung vom äußeren div Tag zum neuen inneren verschiebe span tag. Werfen Sie dies als eine weitere alternative Idee, wenn display: inline block ist keine geeignete Antwort für Sie.


Ich habe versucht, div.classname{display:table-cell;} und es hat funktioniert!


Ich weiß nicht, in welchem ​​Kontext das angezeigt wird, aber ich glaube, dass die CSS-artige Eigenschaft, float entweder left oder right float diesen Effekt hat. Auf der anderen Seite wird es auch andere Nebenwirkungen haben, wie zum Beispiel Text um es herum schwimmen zu lassen.

Bitte korrigieren Sie mich, wenn ich falsch liege, ich bin mir nicht 100% ig sicher und kann es derzeit nicht selbst testen.


Meine CSS3-flexbox-Lösung in zwei Varianten: Die erste oben verhält sich wie eine Spanne und die untere, verhält sich wie ein div und nimmt die gesamte Breite mit Hilfe eines Wrappers. 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.


Probiere 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>



Sie können es einfach mit display: inline; (oder white-space: nowrap; ).

Ich hoffe, Sie finden das nützlich.


Sie möchten ein Blockelement, das über CSS-Schrumpfanpassungsbreite verfügt, und die Spezifikation bietet keinen gesegneten Weg, um so etwas zu erhalten. In CSS2 ist Shrink-to-Fit kein Ziel, sondern bedeutet, sich mit einer Situation zu befassen, in der der Browser "eine Breite aus dem Nichts bekommen muss". Diese Situationen sind:

  • schweben
  • absolut positioniertes Element
  • Inline-Blockelement
  • Tabellenelement

wenn keine Breite angegeben ist. Ich habe gehört, dass sie darüber nachdenken, was Sie in CSS3 hinzufügen möchten. Für jetzt, machen Sie sich mit einem der oben genannten.

Die Entscheidung, das Feature nicht direkt verfügbar zu machen, mag seltsam erscheinen, aber es gibt einen guten Grund. Es ist teuer. Shrink-to-fit bedeutet, dass die Formatierung mindestens zweimal erfolgt: Sie können erst dann ein Element formatieren, wenn Sie dessen Breite kennen, und Sie können die Breite nicht berechnen, indem Sie den gesamten Inhalt durchgehen. Außerdem braucht man kein Schrumpf-zu-Sitz-Element, so oft man vielleicht denkt. Warum brauchst du extra div um deinen Tisch? Vielleicht ist die Tabellenüberschrift alles, was Sie brauchen.


Wenn Sie Container mit Zeilenumbrüchen haben, nach Stunden nach einer guten CSS-Lösung suchen und keine finden, verwende ich jetzt 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>


Wir können jede der beiden Möglichkeiten für das div Element verwenden:

display: table;

oder,

display: inline-block; 

Ich bevorzuge die display: table; , weil es alle zusätzlichen Räume eigenständig handhabt. Während der display: inline-block benötigt einige zusätzliche Leerzeichen.


OK, in vielen Fällen müssen Sie gar nichts tun, da div standardmäßig height und width als Auto hat, aber wenn es nicht Ihr Fall ist, wird das inline-block Display für Sie funktionieren ... schauen Sie sich den Code an, den ich erstelle für dich und es ist was 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>



<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 Leute manchmal keine Tische mögen, aber ich muss dir sagen, ich habe versucht, die css-Inline-Hacks zu benutzen, und sie arbeiteten irgendwie in einigen divs, aber in anderen nicht, also war es einfach einfacher, das expandierende div einzufügen eine Tabelle ... und ... kann die Inline-Eigenschaft haben oder nicht und trotzdem ist die Tabelle diejenige, die die gesamte Breite des Inhalts enthält. =)


div{
  width:auto;
  height:auto;
}




width