Le style CSS - comment mettre ces deux div cases adjacentes

J'ai deux divs à l'intérieur d'un div, je les veux tous deux adjacents les uns aux autres avec une marge de 10px ou alors de les séparer, mais au lieu de cela, ils apparaissent l'un au dessus de l'autre.

 <div>
     <div class="post" id="fact">
    </div>

    <div class="post" id="sortbar">
    </div>

 </div>

Ici, c'est mon style:

 #fact{width:200px; margin-left:auto; margin-right:auto;} #sortbar{margin-left:auto; margin-right:auto;}

L'ensemble du code est à l'intérieur d'un conteneur div wrapper avec ces propriétés:

 #wrapper {
 float:left;
margin-top:10px;
 width:728px;
 }

OriginalL'auteur David Willis | 2010-08-22

  1. 15

    Vous avez deux options choisir l'un ou l'autre mais pas les deux).

    • ensemble float: left; sur les deux #fact et #sortbar
    • ensemble display: inline-block; sur les deux #fact et #sortbar

    La deuxième option est mieux parce que vous n'avez pas de fixer la compensation et le de telles, ainsi que le fait que inline-block fonctionne beaucoup mieux mise en page que de gauche flottant.

    OriginalL'auteur Delan Azabani

  2. 5

    Voir ce exemple de travail. Vous pouvez copier et coller le HTML & CSS et de l'essayer.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS styling - how to put these two div boxes adjacent</title>

<style type="text/css">
.wrapper .post {
-moz-border-radius:7px 7px 7px 7px;
border:1px solid silver;
float:left;
margin:10px;
min-height:100px;
padding:5px;
width:200px;
}

</style>
</head>

<body>
<h4>CSS styling - how to put these two div boxes adjacent</h4>

<div class="wrapper">
<div class="post">
    <div>
    Browse (<a href="http://www.google.com/ncr">Google</a>)
    </div>
    <div>
    This is a Div
    </div>
    <div>
    This is a Div
    </div>
    <div>
    This is a Div
    </div>
</div>

<div class="post">
    <div>
    Browse (<a href="http://www.wikipedia.org/">Wikepedia</a>)
    </div>
    <div>
    This is another Div
    </div>
    <div>
    <div>
    This is another Div
    </div>
    <div>
    This is another Div
    </div>
</div>
</div>

</body>
</html>

    OriginalL'auteur Angkor Wat

  3. 0

    Quelque chose comme cela devrait le faire...

    #fact {
    width:200px; 
    float: left;
    margin: 0 10px 0 0;
} 
#sortbar {
    float: left;
}

    OriginalL'auteur realshadow

  4. 0

    Ajouter float:left;:

    #fact, #sortbar{
  float:left;
  margin-left:10px;
}

    Voir le travail de démonstration ici.

    OriginalL'auteur Sarfraz

  5. 0

    Essentiellement de votre #de fait et de #sortbar divs ont encore de la valeur par défaut "bloc" type d'affichage qui, en termes simples, sera mis à votre divs dans leur propre espace horizontal. Les autres réponses ici montrent comment utiliser "float" pour résoudre votre problème.

    Voici un lien pour vous:

    modèle de boîte: http://www.w3.org/TR/CSS2/box.html

    affichage de la propriété css: http://www.w3schools.com/css/pr_class_display.asp

    flotteur tutoriel: http://css.maxdesign.com.au/floatutorial/

    Dan

    OriginalL'auteur Dan Kendall