как сделать разделы в одну строку?

Question

HTML:

<section id="grid">
    <aside class="grid">
        <img class="img" src="i/img.jpg" />
        <p></p>
    </aside>
    <aside class="grid">
        <img class="img" src="i/img.jpg" />
        <p></p>
    </aside>
    <aside class="grid">
        <img class="img" src="i/img.jpg" />
        <p></p>
    </aside>    
</section>

css:

#grid{  
    margin:50px 0 0 10px;
    width:100%;
    text-align:center;
}
.grid{
    margin-left:20px;
    margin:0 auto;
    width:300px;    
}

Как разместить эти разделы в одну линию и по центру?

Answer 1

Надеюсь, это то, что вы хотели: http://jsfiddle.net/thirtydot/ypce8/

Мой ответ более сложный, чем мог бы быть по двум причинам:

• Я предполагаю, что числоэлементы не исправлены.
• Я включил поддержку IE6 / 7 (при условии, что вы уже используете html5shiv или аналогичный).

#grid {  
    margin: 50px 0 0 10px;
    width: 100%;
    text-align: center;
    zoom: 1;
    border: 1px dashed #f0f
}
.grid {
    border: 1px solid red;
    margin-left: 16px;
    width: 300px;
    vertical-align: top;
    display: inline-block;
    /*if you need ie6/7 support*/
    *display: inline;
    zoom: 1
}
.grid:first-child {
    margin-left: 0
}
.grid img {
    display: block
}

Answer 2

может потребоваться контейнер

#grid{  
    margin:50px 0 0 10px;
    width:100%;
    text-align:center;
    border:1px solid red;
}

.container {
    width:906px;
    margin:0 auto;
    border:1px solid green;
}

.grid{
    margin-left:20px;
    margin:0 auto;
    width:300px;
    float:left; 
    border:1px solid blue;  
}

<section id="grid">
    <div class="container">
    <aside class="grid">
        <img class="img" src="i/img.jpg" />
        <p></p>
    </aside>
    <aside class="grid">
        <img class="img" src="i/img.jpg" />
        <p></p>
    </aside>
    <aside class="grid">
        <img class="img" src="i/img.jpg" />
        <p></p>
    </aside> 
    </div>   
</section>