Question

我想让浮动一些具有固定大小的div，让我们说300px。我从Center floating DIVs中取了例子然后我插入div的大小。它们工作正常但是当我调整屏幕尺寸（让它变小）时，它们就不再是中心了。此外，我也想在div之间留出一些空间。

提前致谢。

这里是实际代码：

<!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>

Answer 1

如果您不想让屏幕在屏幕较窄时掉到下一个“行” - 将min-width设置为容器并将溢出设置为自动 - 以触发滚动。

<强> FIDDLE

#container
    {               
        text-align:center;
        margin:0 50px; 
        min-width: 1036px;
        overflow: auto;
    }
    #container div
    {           
        padding:5px;
        display:inline-block;
        width: 300px;
        margin: 10px;
    }

Answer 2

你可以试试吗：移除float: left并在display: inline-block

中添加#container div

居中浮动div

2 个答案: