0

I would like to let float some div with a fixed size, let's say 300px. I took the example from Center floating DIVs and I insert the size of the div. They work OK but when I re size the screen (getting it smaller) they are not anymore in the center. Moreover I also would like to have some space between the div.

Thanks in advance.

Here the actual code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Center Div</title>
    <style type="text/css">
    #container
    {               
        text-align:center;
        margin:0 auto;    

        display:table;
    }
    #container div
    {           
        float:left;
        padding:5px;
        display:cell;
        width: 300px
    }
    </style>
</head>
<body>  
    <div id="container">
        <div style="background-color:yellow">Text ffffffffffff1<p>ddd</p>
            <p>r&nbsp; </div>
        <div style="background-color:lightgreen">Text fffffffffffff2<p>ddd</p>
            <p>v</div>
        <div style="background-color:lightblue">Text fffffffffffffff3<p>ddd</p>
            <p>b</div>            
    </div>
</body>
</html>
4

2 回答 2

0

如果您不希望您的块在屏幕狭窄时落到下一个“行” - 将 a 设置min-width为您的容器并将溢出设置为 auto - 以触发滚动。

小提琴

#container
    {               
        text-align:center;
        margin:0 50px; 
        min-width: 1036px;
        overflow: auto;
    }
    #container div
    {           
        padding:5px;
        display:inline-block;
        width: 300px;
        margin: 10px;
    }
于 2013-08-14T11:05:43.193 回答
0

你能试试吗：删除并float: left添加display: inline-block#container div

于 2013-08-14T12:26:48.527 回答