Question

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

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;
}

Answer 1

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

    <!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 无论何时使用float，如果离开，这将清空空白区域。

还可以使用宽度选项，以便您更轻松。如果有任何问题，希望这会有所帮助或让我知道。 TY

Answer 2

请更新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;}

CSS布局/网格不对齐

2 个答案: