J'ai besoin d'un max de marge propriété CSS, mais il n'existe pas. Comment pourrais-je faire semblant?
Je suis en train de faire une page simple avec les caractéristiques suivantes:
- Son corps doit être d'au moins 60em de large.
- Ses marges gauche et droite doit être aussi large et à plus 3em large.
- Lorsque la fenêtre du navigateur est redimensionnée, le document de marges devraient être redimensionnée afin que le navigateur de la fenêtre de la barre de défilement horizontal couvre la moins large gamme possible.
Transformer ces exigences en un problème de programmation linéaire, nous obtenons:
DEFINITIONS:
BRWS = (width of the browser window, not a variable)
BODY = (width of the document's body)
LRMG = (width of the document's left and right margins)
HSCR = (range of the browser window's horizontal scroll bar)
OBJECTIVE:
MIN HSCR /* Third requirement */
CONSTRAINTS:
HSCR = BODY + 2*LRMG - BRWS /* From the definition of how a browser's
* horizontal scrollbar works. */
BODY >= 60 /* First requirement */
LRMG <= 3 /* Second requirement */
LRMG >= 0 /* Physical constraint, margins cannot be negative */
HSCR >= 0 /* Physical constraint, scroll bars cannot have negative ranges */
La résolution du programme linéaire, nous obtenons:
BODY = (BRWS <= 66) ? 60 : (BRWS - 6)
HSCR = (BRWS >= 60) ? 0 : (60 - BRWS)
LRMG = (BRWS + HSCR - BODY) / 2
(Désolé pour le percement de mathématiques, mais je ne suis pas convaincu que les explications en anglais a été assez clair.)
Maintenant de retour à la page réelle. Après googler pour trouver ce que je pouvais faire avec le CSS, j'ai réussi à mettre en œuvre les deux premiers besoins à l'aide du code suivant:
body {
min-width: 60em; /* First requirement */
}
/* The document's body has only two children, both of which are divs. */
body > div {
margin: 0 3em; /* Second requirement, but in a way that makes */
max-width: 100%; /* it impossible to satisfy the third one. */
}
Si le CSS avait un max-margin
des biens, à satisfaire à toutes les exigences serait facile:
body > div {
max-margin: 0 3em;
max-width: 100%;
}
Mais, bien sûr, max-margin
n'existe pas. Comment pourrais-je faire semblant?
- javascript hors de question?
- N'espère pas, parce que c'est la seule façon qu'il va le faire 😉
- Êtes-vous essayer de créer une mise en page centrée? c'est à dire un div qui est de largeur fixe sage, mais reste dans le centre même lorsque le navigateur est redimensionnée?
- Oui. Je sais comment le faire avec du JavaScript, mais c'est quelque chose que JavaScript ne devrait pas être obligatoire pour.
- J'ai déjà un centré mise en page. Ce que je veux, c'est que à la fois le corps du document et le document marges de l'être redimensionnée dans une manière sensible.
- avez-vous un lien vers une démo de la page, parce que je ne suis pas encore au clair sur exactement ce que vous essayez d'atteindre?
- Si je suis reding ce corectly il est en train de créer une mise en page centrée, où la largeur est variable, mais un minimum de 60em. aditionally le contenu doit avoir une marge de 3em qui est de rétrécir si la fenêtre du navigateur n'est pas assez large.
- Exactement! Pourquoi ne pouvais-je pas dit de cette façon?
- probablement parce que vous n'avez pas assez à boire 🙂
- Pouvez-vous utiliser css3 media queries?
- Probablement aussi parce que je suis trop mathématiquement incliné pour mon propre bien.
- J. Lee: Ce sont CSS3 media queries? 😮
- ok ça fait beaucoup plus de sens maintenant. Ainsi, lorsque l'utilisateur se développe le navigateur, vous dites, en effet, la centrale div va s'agrandir (mais gardez 3em marges de chaque côté)? Et que le navigateur est réduite (largeur sage), la centrale div doit également reculer, MAIS pas moins puis 60em. Et il peut même manger dans la 3em marges de afin de tenter de maintenir le minimum 60em?
- Je vous comprends tout à fait que je suis aussi comme ça. J'ai aussi remarqué que je peux m'exprimer plus clairement à l'homme quand j'ai un couple de bières en moi (disclaimer: je ne suis pas préconisent de boire, je suis juste en indiquant une observation)
- Zut, je souhaite que je pourrais downvote à ma propre question, parce que c'est totalement stupide.
Vous devez vous connecter pour publier un commentaire.
Entretoise divs de chaque côté du contenu de la vrd. Ceux sont vos marges. Définir leur largeur maximale à l'aide de la max-width de la propriété.
Pour simuler une variable de la largeur de la marge de gauche:
Pour pur CSS qui fonctionne dans n'importe quel scénario:
Vous aurez juste besoin de faire le calcul pour trouver la statique tailles au point de rupture assurez-vous qu'il évolue de manière fluide.
Exemple De Code:
Cela fera
.my_class
suivre à la fois:margin: 0px 10%;
sur une largeur d'écran de 480pxmargin: 0px 10px;
à moins de 480px.<div>
sur la gauche (ou à droite), vous devez utiliserfloat: left
ou l'équivalent, et vous ne pouvez pas utiliser unwidth: 100%
pour l'intérieur<div>
donc, vous devez ajouter un JavaScript ou utiliser votre solution qui est tout simplement parfait!Matthieu réponse est correcte ici, mais de s'étendre sur ce qu'il dit:
CSS:
Aucune réponse n'a fonctionné pour moi à 100%.
Meilleur moyen est d'utiliser CSS
table
ettable-cell
. Pris en charge par tous les navigateurs (même IE 8). Cela gère habillage façon de mieux que defloat
ouinline-block
solutions, lorsque la page est trop étroit.CSS
HTML
Entretoise divs sont les mauvaises pratiques. L'installation d'une autre DIV en haut de votre DIV sur votre modèle avec
text-align:right
(si vous voulez maximiser la marge de gauche) ou detext-align:left
si vous voulez maximiser la marge de droite, ce sera de faire le travail.Voir http://www.labite.com/
Re-taille de la fenêtre pour observer les changements de l'interface utilisateur.
Le site utilise des min-width, max-width width:100%
Le cadre noir a max-width qui est un peu plus large, puis le conteneur.