Ik weet zeker dat dit probleem al eerder is gesteld, maar ik kan het antwoord niet vinden.
Ik heb de volgende opmaak:
<div id="foo">
<div id="bar">
here be dragons
</div>
</div>
Mijn wens is om foo een breedte te geven van 600px(width: 600px;) en om de bar het volgende gedrag te laten vertonen:
padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;
Met andere woorden, in plaats van de breedte van de balk in te stellen op 592px, zou ik de buitenste breedte van de balk willen instellen op 100%zodat deze wordt berekend als 592px. Het belang hier is dat ik de breedte van foo kan wijzigen in 800pxen bar zal berekenen wanneer het wordt weergegeven in plaats van dat ik de wiskunde voor al deze instanties handmatig moet doen.
Is dit mogelijk in pure CSS?
Wat meer plezier ermee:
- Wat als
#bareen tabel is? - Wat als
#bareen tekstgebied is? -
Wat als
#bareen invoer is? -
Wat als
#fooeen tabelcel is (td)? (Verandert dit het probleem of is het probleem identiek?)
Tot nu toe zijn de table#bar, input#barbesproken. Ik heb geen goede oplossing gezien voor textarea#bar. Ik denk dat een tekstgebied zonder rand/marge/opvulling met een divomslag zou kunnen werken met de divdie is opgemaakt om te werken als randen voor het textarea.
Antwoord 1, autoriteit 100%
BEWERKEN:
Die drie verschillende elementen hebben allemaal verschillende weergaveregels.
Dus voor:
table#barje moet de breedte op 100% zetten, anders is het zo breed als het nodig heeft. Als de totale breedte van de tabelrijen echter groter is dan de breedte van bar, wordt deze uitgebreid tot de benodigde breedte. ALS ik me herinner, kun je dit tegengaan door display: block !important;in te stellen, hoewel het een tijdje geleden is dat ik dat heb moeten repareren. (ik weet zeker dat iemand me zal corrigeren als ik het mis heb).
textarea#barik denk dat het een element op blokniveau is, dus het zal dezelfde regels volgen als de div. Het enige voorbehoud hier is dat textareaattributen van colsen rowsneemt die worden gemeten in karakterkolommen. Als dit op het element is opgegeven, zal het de breedte overschrijven die door de css is opgegeven.
input#baris een inline element, dus standaard kun je er geen breedte aan toewijzen. Het lijkt echter op textarea‘s colsattribuut, het heeft een sizeattribuut op het element dat de breedte kan bepalen. Dat gezegd hebbende, je kunt altijd een breedte specificeren door er display: block;voor te gebruiken in je css. Dan zal het dezelfde weergaveregels volgen als de div.
td#foozal worden weergegeven als een table-celldie wat geks heeft. Het komt er hier op neer dat het voor jouw doeleinden net als div#foogaat werken voor zover het de breedte van de inhoud beperkt. Het enige probleem hier is mogelijk niet-inpakbare tekst in de kolom ergens waardoor het uw breedte-instelling zou negeren. Ook krijgen alle cellen in de kolom de breedte van de breedste cel.
Dat is het standaardgedrag van element op blokniveau – dwz. als de breedte autois (de standaardinstelling), dan is het 100% van de binnenbreedte van het bevattende element. dus in wezen:
#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}
geeft je precies wat je wilt.
Antwoord 2, autoriteit 79%
bijna daar, verander gewoon outerWidth: 100%;in width: auto;(outerWidth is geen CSS-eigenschap)
U kunt ook de volgende stijlen op de balk toepassen:
width: auto;
display: block;
Antwoord 3, autoriteit 40%
Gebruik de stijlen
left: 0px;
of/en
right: 0px;
of/en
top: 0px;
of/en
bottom: 0px;
Ik denk dat dat in de meeste gevallen het werk zal doen
Antwoord 4, autoriteit 9%
Dus na onderzoek wordt het volgende ontdekt:
Voor een div#barinstelling display:block; width: auto;veroorzaakt het equivalent van outerWidth:100%;
Voor een table#barmoet je deze in een div plaatsen met de onderstaande regels. Dus je structuur wordt:
<div id="foo">
<div id="barWrap" style="border....">
<table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;">
Op deze manier neemt de tabel de bovenliggende div 100% in beslag en wordt #barWrapgebruikt om randen/marge/opvulling toe te voegen aan de tabel #bar. Merk op dat je de achtergrond van het hele ding in #barWrapmoet instellen en dat de achtergrond van #bartransparant moet zijn of hetzelfde als #barWrap.
Voor textarea#baren input#barmoet je hetzelfde doen als table#bar, de keerzijde is dat door door de randen te verwijderen stopt u de native widgetweergave van het invoer-/tekstgebied en de randen van de #barWrapzullen er een beetje anders uitzien dan al het andere, dus u zult waarschijnlijk al uw invoer op deze manier moeten opmaken.
Antwoord 5, autoriteit 9%
box-sizing: border-box;
width: 100%;
padding: 5px;
box-sizing: border box; zorgt ervoor dat opvulling, marge en rand worden opgenomen in de breedteberekeningen.
Antwoord 6
Het instellen van display: 'inline-block'op het onderliggende element heeft voor mij geholpen.
Dat zou de container van het element strak om zich heen ‘wikkelen’, in plaats van automatisch de hele lijnbreedte te voelen. Op deze manier kunnen bovenliggende elementen er ook omheen vormen en niet meebewegen met hun onderliggende element.