Comment puis-je faire divs de 150x150 carrés le long de l'écran

*et de lancer de nouvelles lignes qu'ils remplissent chaque rangée précédente?

cela devrait fonctionner mais ne marche pas pour moi,

html:

<div id="squares">
<div id="1">
width:150px;
height:150px;
</div>
<div id="2">
width:150px;
height:150px;
</div>
<div id="3">
width:150px;
height:150px;
</div>  
</div>

donc cela créé de 3 cases sur la page

css:

#squares {
display:inline;
background-color:#000000;
}

Le css devrait leur dire de s'aligner et d'être noir, de sorte que nous pouvons les voir, pour déterminer si elles sont dans le bon endroit ou pas.

Dois-je ajouter quelque chose? Pouvez-vous penser à des méthodes différentes de parvenir à ce résultat?

Vous ne pouvez pas le faire sans javascript.
Il y a beaucoup de mal avec ce code. Votre largeur et la hauteur d'affectations de contenu de la <div> éléments, et non des styles appliqués à eux. Votre règle CSS cibles le contenant, pas le <div>s à l'intérieur. inline éléments n'acceptent pas les largeurs et hauteurs.
Vous pouvez le faire sans javascript ci-dessous la réponse div {float:left;}

OriginalL'auteur Christopher Orchris | 2012-08-08

  1. 5

    HTML

    <div id="squares">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>​

    CSS

    #squares div {
    /* these styles will let the divs line up next to each other
       while accepting dimensions */
    display: block;
    float: left;

    width: 150px;
    height: 150px;
    background: black;

    /* a small margin to separate the blocks */
    margin-right: 5px;
}

    Une alternative à l'utilisation de float serait d'utiliser inline-block style:

    display: inline-block;
zoom: 1;
*display: inline;
    un violon la démonstration de cette solution.

    OriginalL'auteur jackwanders

  2. 1

    Il vous manque un div déclaration pour indiquer qu'il doit s'appliquer à la les divisions à l'intérieur de la div avec l'id "places":

    css:
#squares div {
display:inline;
background-color:#000000;
}

    OriginalL'auteur Frank Orellana

  3. 1

    La meilleure approche est avec display: inline-block;

    HTML

    <div id="squares">
<div id="1" class="square">
</div><div id="2" class="square">
</div><div id="3" class="square">
</div>
</div>​

    Veuillez notez comment le balisage HTML a été formaté, il est important d'éviter d'obtenir une marge supplémentaire entre les éléments, tout en utilisant display inline-block (cochez cette)

    CSS:

    .square {
background-color: #000;
display: inline-block;
height: 150px;
vertical-align: top;
width: 150px;
*display: inline;
zoom: 1;
}

    pour le développeur, vous pouvez ajouter:
    CSS:

    .square {outline: 1px solid red;}

    de sorte que vous pouvez voir leur dimension sans casser la mise en page (par l'extension naturelle de la largeur de l'élément)

    OriginalL'auteur skoubin

  4. 0

    je pense que vous êtes absent;

    div {float:left;}

    OriginalL'auteur Santiago Rebella

  5. 0

    Si je comprends bien, vous voulez que chaque div #1 #2 et #3 à 150px de largeur et de hauteur à tous dans une rangée, dans ce cas

    Vous souhaitez cibler chaque div pas le principal, comme

    #squares > div {
    display:block;
    float:left;
    width:150px;
    height:150px;
    background-color:#000000;
    margin-right:5px;
}

    OriginalL'auteur Outcast