min-width und max-width werden ignoriert, wenn Element angezeigt wird: table-cell

Question

Ich versuche ein einfaches Fluid-Layout mit CSS tables technique, aber es gibt einen großen Fehler, den ich darin gefunden habe: min-Breite und max -width werden bei Elementen mit Tabellenzellenanzeige ignoriert.

Kennen Sie eine Problemumgehung, die es mir ermöglichen würde, anzugeben, wie weit das Element #sidebar im folgenden Beispiel gedehnt werden kann?

XHTML:

<div id="wrapper"> 

    <div id="main"> 
    </div> 

    <div id="sidebar"> 
    </div> 

</div> 

CSS:

#wrapper { 
display: table-row; 
border-collapse: collapse; 
} 

    #main { 
    display: table-cell; 
    } 

    #sidebar { 
    display: table-cell; 
    width: 30%; 
    min-width: 100px; /* does not work! */ 
    max-width: 310px; /* does not work! */ 
    } 

Answer 1

Wenn Sie nur versuchen, eine Sidebar und Haupt-Setup zu tun, verwenden float: left statt table-row und table-cell. Dann können Sie Ihre Mindestbreite auf die ID setzen.

Answer 2

weiteren hinzufügen Wrapper in jedem div:

<div id="wrapper"> 

    <div id="main"> 
    <div class="inner"></div> 
    </div> 

    <div id="sidebar"> 
    <div class="inner"></div> 
    </div> 

</div> 

und legte die *-width Erklärungen auf sie:

#sidebar div.inner { 
    min-width: 100px; 
    max-width: 300px; 
} 

Answer 3

ich für eine Website auf Responsive Design suchen, die links zeigt -> rechts und dann nach unten und möchte selbst eine minimale Breite erreichen. Wenn ich ein wenig Nachforschungen anstellen würde, würde ich diese Frage vielleicht beantworten.

https://css-tricks.com/almanac/properties/m/max-width/