1. Accueil
  2. Question et réponse
  3. Aligning Divs with CSS

Aligning Divs with CSS

2009-08-19 6 views
1

Je sais qu'il y a des tonnes d'articles partout sur Google à faire quelque chose de similaire, mais le problème est qu'ils varient tous sur l'implémentation. Ce que je voudrais essentiellement faire est d'avoir un seul div d'une largeur fixe être aligné au centre de ma page, avec des barres sur le côté stylable à ce que je voudrais. Dans Flex (MXML), je pourrais facilement y arriver avec quelque chose comme ceci:Aligning Divs with CSS

<mx:HBox width="100%"> 
    <mx:VBox id="sideBarLeft" width="100%"/> 
    <mx:Panel id="content" width="500"/> 
    <mx:VBox id="sideBarRight" width="100%"/> 
</mx:HBox>

Cela me donnerait un design qui ressemble à ceci:

[sideBarLeft][content][sideBarRight]

Les barres latérales élargiraient comme la zone d'écran grandit, mais le contenu resterait le même, 500px de large.

Comment est-ce que j'aurais réalisé ceci en HTML avec des divs et CSS? De même, existe-t-il un moyen de définir la largeur minimale des barres latérales? C'est à dire: une taille qu'ils ne pouvaient pas réduire ci-dessous? (Par exemple: < mx: VBox id = "sideBarLeft" width = "100%" minWidth = "150"/>)

Et je présente mes excuses pour la nature de combien d'un novice que je suis à ce genre de choses. Je suppose que j'ai passé trop de temps à des applications de construction et trop peu de temps avec HTML et CSS :)

Source

2009-08-19 Naftuli Kay

Répondre

3

Y a-t-il une raison particulière pour laquelle vous voulez utiliser les cellules de table de div dans ce cas?

Peu importe, je suis venu avec une solution rapide, vous pourriez aimer:

<html><head> 
<style type="text/css"> 
*   { margin: 0; padding: 0; } 
body  { text-align: center; } 
#content { width: 500px; height: 100%; margin: 0 auto; 
      text-align: left; background: #DDDDDD; overflow: auto; } 
.column { width: 50%; position: absolute; top: 0; height: 100%; } 
#leftcol { margin-right: 250px; background: #AAAAAA; height: 100%; } 
#rightcol { margin-left: 249px; background: #AAAAAA; height: 100%; } 
</style> 
</head><body> 
<div class="column" style="left:0;"> 
<div id="leftcol">This is the column on the left.</div> 
</div> 
<div id="content">Your content goes here.</div> 
<div class="column" style="right:0;"> 
<div id="rightcol">This is the column on the right.</div> 
</div> 
</body></html>

je vraiment minified pour l'adapter bien ici, mais de copier et coller dans un fichier et dites-moi ce que vous pensez. Soyez juste averti: l'utilisation de tables est la meilleure façon de le faire, et est parfaitement acceptable. Il n'y a aucun problème à combiner des tables et des divs, et des tables de style/positionnement avec CSS. Cette solution est plus une «solution de contournement», mais une chose est sûre: cela fonctionne.

Source

2009-08-19 19:08:37 Breakthrough

+0

Sérieusement. Veerrry sympa. – Donut

+0

C'est un génie fou. Bon travail! Désolé, car j'apprends davantage sur CSS, je suis constamment découragé par d'autres développeurs d'utiliser des tables. Il y a comme ce vaudou bizarre à propos de l'utilisation de tables dans un design. –

+1

Il y a des cas où il est bon d'utiliser des tables, et quand il est bon d'utiliser div. La pensée générale sur Internet est de n'utiliser que div ... je dirais d'utiliser div, mais si vous avez absolument besoin d'utiliser des tables, allez-y - surtout dans un cas comme celui-ci, où il sera compatible avec tous les navigateur (plus-que les astuces CSS avancées). Tout dépend de la complexité de votre mise en page. – Breakthrough

0

Edit: @ réponse de percée semble comme il le fait exactement ce que vous voulez en utilisant seulement div's et CSS; Je vais juste laisser ma solution CSS-ified avec Tables comme alternative.

<html> 
<head> 
    <style type="text/css"> 
     #main { min-width: 800px; width: 100%; } 
     #content { width: 500px; background: red; } 
     .sidebar { background: blue; min-width: 150px; } 
    </style> 
</head> 
<body>  
<table id="main"> 
    <tr> 
     <td class="sidebar">Left</td> 
     <td id="content">Center</td> 
     <td class="sidebar">Right</td> 
    </tr> 
</table>  
</body> 
</html>

Source

2009-08-19 18:50:40 Donut

Questions connexes

 Questions connexes