HTML - CSS Breite angewendet nicht div Arbeits

Ich habe eine div mit Klasse widget und ich angewendet width und length Styling meiner Widget-Klasse, aber aus irgendeinem Grund, die Breite ist nach wie vor 100% des Bildschirms statt 200px wie ich unten definiert. Kann jemand helfen?HTML - CSS Breite angewendet nicht div Arbeits

Hier ist eine Geige:

https://jsfiddle.net/ps17t1a5/

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    display: table 
} 


.widget { 

    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    margin: 0; 
    width: 500px; 
    height: 200px; 
    padding: 7px; 

} 

    <body ng-controller="main_controller"> 
     <div class="widget"> 
      <h1>{[city]}, {[state]}</h1> 
      <div> 
       <h1 style="float: left">{[current_temp | degree]}</h1> <h1 style="float: right">afasf</h1> 
      </div> 
      <p>{[today_day]}</p> 
      <p>{[today_high | degree]}/{[today_low | degree]}</p> 
     </div> 
    </body>

Quelle

2016-05-18 Trung Tran

Ein Ausschnitt oder eine Geige würde helfen, das Problem in Aktion zu sehen. '.widget' ist eine allgemeine Klasse und kann von einem Plugin verwendet werden, das die Regel überschreibt. –

Versuchen Sie, 'display: table' aus dem' html, body'-Selektor zu entfernen. – pmahomme

Ich habe eine Geige hinzugefügt @IlpoOksanen –

Cells in einem table sollte bis zu 100% der table Dimensionen hinzuzufügen. Sie haben Ihre Tabelle als body Element mit width: 100% und height: 100% festgelegt - Ihre .widget ist die einzige cell und nutzt somit den gesamten Speicherplatz als Konsequenz. Entfernen Sie einfach die display: table und display:table-cell Regeln und die Dimension Regeln funktionieren:

https://jsfiddle.net/ilpo/ps17t1a5/3/

Ich weiß nicht, warum Sie display:table-cell in erster Linie nutzen wollen würde, aber ich vermute, es für die vertikale ist und horizontale Zentrierung. Sollte dies der Fall sein, verwenden Sie stattdessen:

position: absolute; //or relative or fixed depending on your needs 
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%);

Quelle

2016-05-18 21:45:35

Sorry - das war eine schlechte Kopie und einfügen. Mein Code hat bereits die "px" -Einheiten –

Einige Änderungen vorgenommen. –

Sie müssen 200px setzen, statt nur 200

Quelle

2016-05-18 21:46:43 EternalMonologue

Entschuldigung - das war eine schlechte Kopie und Paste. Mein Code hat bereits die 'px' Einheiten –

Höhe und Breite falsch definiert, sollten sie 500px und 200px sein

Quelle

2016-05-18 21:46:45

Sorry - das war eine schlechte Kopie und einfügen. Mein Code hat bereits die "px" -Einheiten –

Entfernen der display: table von der body macht das width Attribut durch das gerenderte Element geehrt.

Lesen the docs, heißt es, dass dies das div Verhalten wie ein table Element macht.

In diesem Fall sieht es aus wie die table würde nur ein cell und enthält, da das gleiche body Element ein Attribut width:100% hat dies macht das widget Element eine volle Breite der Zelle haben (daher die volle Breite der Tabelle, daher die volle Breite der Seite)

Macht das Sinn?

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    /*display: table;*/ 
 
} 
 
.widget { 
 
    /* added to show box boundaries */ 
 
    border: 1px solid green; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    margin: 0; 
 
    width: 310px; 
 
    height: 160px; 
 
    padding: 7px; 
 
}

<body ng-controller="main_controller"> 
 
    <div class="widget"> 
 
    <h1>juno, alaska</h1> 
 
    <div> 
 
     <h1 style="float: left">10</h1> 
 
     <h1 style="float: right">cool</h1> 
 
    </div> 
 
    <p>today</p> 
 
    <p>69/ 88</p> 
 
    </div> 
 
</body>

Quelle

2016-05-18 22:23:44 ochi

HTML - CSS Breite angewendet nicht div Arbeits

Antwort

Verwandte Themen