Как выровнять горизонтальный DIV внутри родительского DIV?

Question

Я хочу, чтобы выровнять по горизонтали дивы внутри родительского сНу #main и скрыть горизонтальную прокрутку Я попытался сделать такой: http://jsfiddle.net/Ty9kg/30/

<div id="main"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
</div> 

#main { 
    border:1px solid black; 
    width:250px; 
    height:150px; 
    overflow-y:hidden; 
    overflow-x:scroll; 
} 

    #main div { 
     width:165px; 
     height:120px; 
     display:inline-block; 
     float:left; 
     background:#ccc; 
     border:1px solid #ccc 
    } 

Answer 1

Я думаю, что вы хотите:

http://jsfiddle.net/umQ32/

HTML:

<div id="mainContainer"> 
    <div id="main"> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
    </div> 
</div> 

CSS:

#mainContainer{ 
    width:300px; 
    height:120px; 
    overflow-x:scroll; 
} 

#main{ 
    width:1200px; 
    height:100px; 
    background-color:blue; 
} 

.child{ 
    width:200px; 
    height:100px; 
    margin:0 5px 0 0; 
    float:left; 
    background-color:red; 
} 

Answer 2

Хотите the following?

#main { 
    border:1px solid black; 
    width:250px; 
    height:150px; 
    overflow-y:hidden; 
    overflow-x:scroll; 
    white-space: nowrap; 
} 

#main div { 
    width:165px; 
    height:120px; 
    display:inline-block; 
    background:#ccc; 
    border:1px solid #ccc;  
    white-space: normal; 
} 

Если да, то float излишним в вашем коде.

Answer 3

Если я правильно понимаю, вы хотите, чтобы серые прямоугольники были рядом друг с другом подряд? В настоящее время вы предоставили вашему основному div ширину 250px, а внутренние divs - 165px. По понятным причинам они не подходят.

попробовать это:

#main { 
    border:1px solid black; 
    overflow-y:visible; 
    width:990px; 
} 

#main div { 
    width:165px; 
    height:120px; 
    display:inline-block; 
    background:#ccc; 
    margin-right:-4px; 
    padding:0; 
} 

http://jsfiddle.net/Ty9kg/32/