Appliquer un “min-marge” pour un design fluide
Je suis en train de construire un site qui fonctionne mieux en assez haute résolution, mais aussi des diapositives de gauche aussi loin que possible lorsque la résolution est plus faible.
Je ne suis même pas sûr de ce code à copier dans ici, donc le lien est:
Ce dont j'ai besoin est pour le côté gauche de #page
pour arrêter le glissement de gauche à droite de #logo
plus quelques pixels. C'est 13.25em
à partir de la gauche de la page.
J'ai mis de la marge de gauche de #page
à 13.25em
, ce qui semble correct, mais à des résolutions plus élevées, la page semble étrange parce qu'elle n'est pas centrée. Je veux conserver le centrage, mais aussi l'arrêter coulissantes à un certain point.
Donc je veux la gauche de ne pas aller plus loin sur la gauche de cette:
J'aurais LARGEMENT préférer Si je pouvais le faire avec de la pure CSS sur les deux éléments que j'ai noté ici, mais je peux ajouter du code HTML nécessaire.
J'ai été mal pour un long moment avec la façon même de POSER cette question, donc merci de me poser des questions, ou modifier cette question afin d'améliorer la clarté de la question.
Mise à jour:
Voici des images de la façon dont il actuellement ressemble à deux résolutions:
1920
1280
Voici une image de la façon dont il devrait regarder les résolutions ci-dessous d'environ 1540
:
Une résolution supérieur à ~1540
serait à glisser doucement vers la droite, comme il le fait actuellement.
Une maquette de ce qu'il devrait regarder avec
1024px
largeur vs 1920px
largeur qui pourrait la rendre plus claire.J'ai ajouté quelques captures d'écran, comment se comporter dans diverses résolutions, et je veux agir. laissez-moi savoir si ça aide ou pas.
OriginalL'auteur rockerest | 2011-06-28
Vous devez vous connecter pour publier un commentaire.
Ce que je me suis retrouvé à faire était de l'ajout d'un wrapper autour de
#page
. Ce n'est pas ce que je désire dans un monde parfait, mais je veux quemin-margin
dans un monde parfait (ou au moinsmargin: min()
)!Sur l'emballage, j'ai appliqué
margin: 0 13.25em;
où la13.25em
était là où je voulais#page
pour arrêter le glissement à gauche. L'égalité des marges sur les deux côtés de laisser#page
centré sans13.25em
décalage vers la droite. Parce que j'ai utilisé les marges au lieu de rembourrage, le côté droit peut déborder le navigateur sans causer de la barre de défilement horizontale apparaît.Il semble être une bonne correction. J'avais initialement été à la recherche de quelque chose de plus "intelligent", sans ajout de HTML, mais ce fut assez simple et semble assez efficace qu'il semble être vaut bien le supplément de balisage.
À partir de ma fonction de recherche rapide pour obtenir des suggestions sur ce, j'ai vu le vôtre (wrapper avec des marges) et légèrement plus intensive des ressources de la solution de l'aide largeur: calc(100%-80px) avec un max-width de l'attribut. Je ne voulais pas l'adaptateur supplémentaire et est allé avec de la calc solution parce qu'il conserve tous les contrôles à l'intérieur de l'élément concerné.
Il est également intéressant de noter que
calc
est ce n'est pas bien pris en charge dans les navigateurs plus anciens (ou n'importe quel environnement où CSS3 n'est pas pris en charge)OriginalL'auteur rockerest
Si vous n'utilisez pas de frontière pour l'élément, vous pouvez l'utiliser pour définir un "min-marge".
P. S. je sais que c'est une vieille question, mais l'OP a également commenté ce mois-ci.
OriginalL'auteur Stechi
Donner la largeur exacte et la hauteur de la classe de centre de. ensuite, réglez la position à l'absolu: permet de dire que nous voulons set width:400px; height:300px; essayez morceau de code suivant pour le centre
OriginalL'auteur Tural Ali