CSS3 entspricht der Breite: calc (100% - 10px)

Ich suche nach einer Alternative, um mein CSS zu migrieren - bereits am FF und Chrome -, weil QtWebKit es nicht einige CSS3 Feature yeat Rendering.CSS3 entspricht der Breite: calc (100% - 10px)

Ich habe folgende Sachen:

.fit { 
    width: -moz-calc(100% - 10px); 
    width: -webkit-calc(100% - 10px); 
    width: -o-calc(100% - 10px); 
    width: calc(100% - 10px); 
}

Ich möchte eine Klasse alle Element passt, wie in Drahtgitter- Beispiel angezeigt.

enter image description here

Hinweis: Fast alle CSS3-Funktionen können perfekt gemacht werden, aber nach wie vor *-calc() sayed haben Probleme und nicht andere Lösung zB finden. margin-right Verwendung padding-right usw.

@EDIT: ich eine Geige erstellt http://jsfiddle.net/dj3hh/ das erwartete Verhalten zeigen - Sie Geige können die Größe und alle Ränder Respekt 10px von rechts. Ich möchte eine neue Möglichkeit, dies zu tun calc()

Quelle

2013-04-29 Ragen Dazs

Mit Qt-Webkit CSS 'calc' –

Wäre es möglich, ein vereinfachtes Beispiel in einem [jsFiddle] (http://jsfiddle.net) zu machen? – Adrift

1. Bitte geben Sie eine jsfiddle 2. jQuery erlaubt? –

Wenn Sie das Box-Modell-Rendering auf box-sizing: borderbox ändern, dann wird die Auffüllung in der Gesamtbreite enthalten sein, anstatt hinzugefügt werden. In diesem Beispiel gehe ich davon aus, dass Sie die Klasse den Umbruchelementen hinzufügen.

.fit { 
    width:100% 
    padding-right:10px 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;  
    box-sizing: border-box; 

}

Browserunterstützung ist sehr gut; alle modernen Browser. Nur Sie benötigen ein Polyfill für IE7 und darunter.

Weitere Hintergrundinfo: paulirish.com/2012/box-sizing-border-box-ftw/

EDIT:

Dies ist eine Lösung, die ich ganz glauben erfüllt Ihre kurzen, siehe Geige: http://jsfiddle.net/David_Knowles/UUPF2/

.fit { 
    width:100% 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;  
    box-sizing: border-box; 
} 

td { 
    padding-right: 10px; 
}

Quelle

2013-04-29 15:34:35 Timidfriendly

Polsterung! == Rand! Ihre Lösung ist anders als das, was das OP wünscht. – Christoph

@timidfriendly Vergleiche beide (mit calc) http://jsfiddle.net/dj3hh/ (mit Box-Sizing) http://jsfiddle.net/dj3hh/1/ –

Der Vollständigkeit halber; Entfernen Sie das Padding-Recht von .fit und wenden Sie es an die ist ich glaube genau, was Sie gesucht haben. – Timidfriendly

Put position: relative auf das übergeordnete Element, dann tun ...

.fit { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 10px; 
}

Quelle

2013-04-29 18:24:36 Duopixel

CSS3 entspricht der Breite: calc (100% - 10px)

Antwort

Verwandte Themen