CSS 布局/网格未对齐答案

【问题标题】：CSS layout/grid not alignCSS 布局/网格未对齐
【发布时间】：2015-07-27 05:05:57
【问题描述】：

我不明白为什么我的右栏宽度与我的右菜单和中心信息不匹配。我尝试在每个单独的元素周围放置一个浮点数以制作一个三列网格。左侧、中心和右侧的浮点数用于定位列以创建三列的结构。但是，最后一列（右列）的宽度与其他两列不对齐。第三列应该有足够的空间与其余列对齐。请指教。谢谢。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scal=1.0"/>
    <link rel="stylesheet" href="css/main.css" title="Style 1" type="text/css" media="all" />
    <title>somepage</title>
</head> 
    <body>
    <h1>somepage</h1>

            </ul>
        </div>
    </div>
    <div class="center_grid">
    <div id="select_color">


    </div>
    <div id="my_color">
        <h2>my Colors</h2>
        <p>start off with some color.</p>
    </div>
    </div>
    <div class="right_grid">
    <div id="help">
        <h2>Help</h2>
    </div>
    </div>
    </body>
</html>

CSS：

.left_grid {
    float: left;
    border: 1px solid black;
}
.center_grid {
    float: center;
    border: 1px solid black;
    margin-left: 20em;
    margin-right: 20em;
}
.right_grid {
    float: right;
    border: 1px solid black;
}
#menu {
    border: 1px solid black;
    width: 10em;
    margin-top: 3em;
    margin-bottom: 5em;
    padding-left: 2em;
}
#select_color {

    text-align: left;
    margin-left: 2em;

}
#predefined_color {
    text-align: left;
    margin-left: 2em;
}
#help {
    border: 1px solid black;
    width: 10em;
    margin-top: 3em;
    margin-bottom: 5em;
    padding-left: 2em;
}

【问题讨论】：

标签： html css layout

【解决方案1】：

请更新css .center_grid{border: 1px solid black;display: inline-block;margin-left: 20em;width: auto;}

或 .center_grid{border: 1px solid black;float: left;margin-left: 20em;width: auto;}

【讨论】：

请记住，您不应该通过提供一侧边距来使 div 居中。如果有任何变化，它将影响整个结构。

【解决方案2】：

更新根据您的问题和响应式中间栏，请使用此代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scal=1.0"/>
    <link rel="stylesheet" href="css/main.css" title="Style 1" type="text/css" media="all" />
    <title>somepage</title>
    <style>
        .left_grid {
    float: left;
    border: 1px solid black;
    width:15%;
}
.center_grid {
    display:inline-flex;
    width:69%;
}
.right_grid {
    float: right;
    border: 1px solid black;
    width:15%;
}
#menu {
    border: 1px solid black;
    width: 10em;
    margin-top: 3em;
    margin-bottom: 5em;
    padding-left: 2em;
}
#select_color {

    text-align: left;
    margin-left: 2em;

}
#predefined_color {
    text-align: left;
    margin-left: 2em;
}
#help {
    border: 1px solid black;
    width: 10em;
    margin-top: 3em;
    margin-bottom: 5em;
    padding-left: 2em;
}
.in_div
{
    border: 1px solid #000;
    margin: 0 auto;
    width: auto;
}
    </style>
</head> 
    <body>
    <h1>somepage</h1>
    <div style="width:100%;">
            <div class="left_grid">
                <div id="menu">
                    <h2>Menu</h2>
                    <ul>
                        <li><a href="index.html">Color Tester</a></li>
                        <li><a href="help.html">Color Help</a></li>
                    </ul>
                </div>
            </div>
            <div class="center_grid">
                <div class="in_div">
                    <div id="select_color">
                        <h2>Select Your Color</h2>
                        <p>Enter the amount of red, green, and blue in your colour.</p>
                    </div>
                    <div id="predefined_color">
                        <h2>Predefined Colors</h2>
                        <p>You may select one of hte following pre-defined colours to start off with.</p>
                    </div>
                </div>
            </div>
            <div class="right_grid">
            <div id="help">
                <h2>Help</h2>
            </div>
            </div>
            <div style="clear:both;"></div>
     </div>
    </body>
</html>

你应该使用 float:left 作为中心网格，这样它就可以在一行中并在最后一个 div 中向右浮动，但我已经使用 float:left 作为最后一个 div 并且还记得使用 clear:both每当您使用浮动时，如果离开，这将清除空白空间。

还可以使用宽度选项，这样对您来说会更容易。希望这会有所帮助或让我知道是否有任何问题。类型

【讨论】：

感谢您的建议！但是我如何使我的中心列居中。现在左边和中心之间没有空间了。如何将其居中以使只有中心列改变其大小而左右列不改变大小？
什么意思？您想在调整窗口大小时更改中心列的大小还是什么？我以为你想让中心 div 居中，所以我给了 width 和 margin-left 和 margin-right auto 这样它会在调整窗口大小时居中。
很抱歉给您带来了困惑。我想让中间的列在中心。当我调整窗口大小时，中心列将开始调整大小以适应窗口大小。但是，我不希望左右列调整大小。我只想让中心栏响应。这可能吗？
@zeroquanta，请检查我更新的代码，如果它不符合您的计划，请告诉我，然后我会做更多的更改。