CSS stilini geçersiz kılın ve sıfırlayın: otomatik veya hiçbiri çalışmıyor

130

Tüm tablolar için tanımlanan aşağıdaki CSS stilini geçersiz kılmak istiyorum:

table {
        font-size: 12px;
        width: 100%;
        min-width: 400px;
        display:inline-table;
    }

Sınıfı adlı özel bir tablom var 'other'.
Son olarak masa dekorasyonu şöyle görünmelidir:

table.other {
    font-size: 12px;
}

bu yüzden 3 özellikleri kaldırmak gerek: width, min-widthvedisplay

Birlikte sıfırlamak için çalıştı noneya auto, ama yardım etmedi, ben bu davaları demek:

table.other {
    width: auto;
    min-width: auto;
    display:auto;
}
table.other {
    width: none;
    min-width: none;
    display:none;
}

css width overriding

— sergionni
kaynak

195

İlk özellik kümesinin işe yaramamasının nedeninin autodeğerinin olmaması display, dolayısıyla mülkiyetin göz ardı edilmesi gerektiğine inanıyorum. Bu durumda, inline-tableyine de geçerli olacaktır ve şu widthşekilde geçerli değildir:inline öğeler için , bu özellikler kümesi hiçbir şey yapmayacaktır.

İkinci özellik grubu, tabloyu basitçe gizleyecektir. display: none .

tableBunun yerine sıfırlamayı deneyin :

table.other {
    width: auto;
    min-width: 0;
    display: table;
}

Düzenleme: min-width varsayılan değerdir 0, değilauto

— Yi Jiang
kaynak

garip, firebug ile bakıyorum - min-width otomatik tarafından geçersiz

— kılındı

6

@sergionni Oh evet, unuttum - min-widthvarsayılan bir değere sahip 0- reference.sitepoint.com/css/min-width

— Yi Jiang

Firebug'a tekrar baktım, bir de sorun var, iç içe geçmiş tablolar var, bu nedenle geçersiz kılma tüm hiyerarşilere uygulanmalı

— sergionni

1

@sergionni table.other tableSıfırlama özellikleri için kullanılan seçiciye ekleyerek bunu yapabilirsiniz

— Yi Jiang

1

width: autogeçersiz kılmak istediğim tek şey width: 100%- Teşekkür ederim

— Meredith

18

"hiçbiri" yaptığını varsaydığınız şeyi yapmaz. Bir CSS özelliğini "temizlemek" için, CSS standardı tarafından tanımlanan varsayılan değerine geri ayarlamanız gerekir. Bu nedenle, en sevdiğiniz referanstaki varsayılanlara bakmalısınız.

table.other {
    width: auto;
    min-width: 0;
    display:table;
}

— Tenfour
kaynak

10

Set min-width: inherit /* Reset the min-width */

Bunu dene. Çalışacak.

— kırlangıç
kaynak

2

Bu kabul edilen bir cevap olmalıdır. min-width: 0aynı şeyi yapmaz

— v010dya

Doğru, ama ya bir ebeveyn varsa min-width? bunu gerçek bir varsayılan yerine alacaksın.

— adi518

7

displayBir tablonun varsayılan özelliği display:table;. Diğer tek kullanışlı değer inline-table. Diğer tümdisplay değerler tablo öğeleri için geçersizdir.

Bir yoktur autoEğer JavaScript çalışıyorsanız, hile olacaktır boş bir dize, bunu ayarlayabilirsiniz rağmen, varsayılan sıfırlamak için bir seçenek.

width:auto;geçerlidir, ancak varsayılan değildir. Bir tablo için varsayılan genişliği 100%ise width:auto;bu ihtiyacı olarak eleman sadece daha genişliği kadar sürebilir yapacaktır.

min-width:auto;izin verilmez. Ayarladıysanız min-width, bir değeri olmalıdır, ancak bunu sıfıra ayarlamak muhtemelen varsayılana sıfırlamak kadar iyidir.

— Spudley
kaynak

JS hakkında ilginç fikir. İhtiyacım olan şey gibi görünüyor ve önce CSS ile deneyeceğim.

— sergionni

1

De, display: none;her tabloya göstermez, deneyin display: inline-block;genişlik ve 'otomatik' kalan dakika genişliği beyanları ile.

— Steven
kaynak

0

Her şeyi mükemmelleştirmek için Javascript kullanmaya başladım.

JS kemanım: https://jsfiddle.net/QEpJH/612/

HTML:

<div class="container">
    <img src="http://placekitten.com/240/300">
</div>

<h3 style="clear: both;">Full Size Image - For Reference</h3>
<img src="http://placekitten.com/240/300">

CSS:

.container {
    background-color:#000;
    width:100px;
    height:200px;

    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

}

JS:

$(".container").each(function(){
    var divH = $(this).height()
    var divW = $(this).width()
    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < (divW/divH)) { 
        $(this).addClass("1");
        var newW = $(this).width();
        var newH = (newW/imgW) * imgH;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
    } else {
        $(this).addClass("2");
        var newH = $(this).height();
        var newW = (newH/imgH) * imgW;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
    }
})

— kullanıcı
kaynak

0

Minimum genişlik ayarını geri döndürmenin en iyi yolu şudur:

min-width: 0;
min-width: unset;

unset spesifikasyon içindedir, ancak bazı tarayıcılar (IE 10) buna saygı göstermez, bu nedenle 0 çoğu durumda iyi bir yedektir . min-genişlik: 0;

— AdamLukem
kaynak