Html 右列对齐问题_Html_Css - Fatal编程技术网

Html 右列对齐问题

html css

Html 右列对齐问题,html,css,Html,Css,很抱歉，如果这已经在词典中，但我找不到它。我认为这是一个非常简单的三列标题，我无法使右列与左两列对齐。它显示在左栏下方，尽管有足够的空间。我有三个div组成了每一列，我猜问题就出在那里以下是我正在使用的css： body { background-color: #ffaa00; } #container { width: 1268px; height: 900px; background-color: #fff; margin: 0 auto; } /*

很抱歉，如果这已经在词典中，但我找不到它。我认为这是一个非常简单的三列标题，我无法使右列与左两列对齐。它显示在左栏下方，尽管有足够的空间。我有三个div组成了每一列，我猜问题就出在那里

以下是我正在使用的css：

body {
    background-color: #ffaa00;
}
#container {
    width: 1268px;
    height: 900px;
    background-color: #fff;
    margin: 0 auto;
}
/* header styles */
#main {
    height: 110px;
    width: 715px;
    margin: 0 auto;
    background-color: #ccc;
    border-radius: 6px;
}
#frame {
    height: 100px;
    width: 705px;
    background-color: #336699;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 6px;
}
#content {
    height: 90px;
    width: 695px;
    background-color: #ffc;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 5px;
    text-align: center;
    vertical-align: ;
}
/* left header */
#left {
    float: left;
    height: 110px;
    width: 268px;
    margin: 0 auto;
    background-color: #ccc;
    border-radius: 6px;
}
#left-frame {
    height: 100px;
    width: 258px;
    background-color: #336699;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 6px;
}
#left-content {
    height: 90px;
    width: 248px;
    background-color: #ffc;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 5px;
    text-align: center;
}
/* right header */
#right {
        display:inline-block;
    float: right;
    height: 110px;
    width: 268px;
    background-color: #ccc;
    border-radius: 6px;
}
#right-frame {
        display:inline-block;
    height: 100px;
    width: 258px;
    background-color: #336699;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 6px;
}
#right-content {
      display:inline-block;
    height: 90px;
    width: 248px;
    background-color: #ffc;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 5px;
}
h1 {
    display: inline-block;
    margin-top: 15px;
    font-size: 3em;
    font-family: lucida grande;
    color: #336699;
}

以及html：

<body>
<div id="container">
    <div id="left">
        <div id="left-frame">
            <div id="left-content">

                <img src="images/keyboard.jpeg" style="width:248px; height:90px; border-radius:5px;"
                alt="this is a picture">

            </div>
        </div>

    </div>

    <div id="main">
        <div id="frame">
            <div id="content">

                <h1>HERE IS A HEADING!</h1>

            </div>
        </div>

    </div>

    <div id="right">
        <div id="right-frame">
            <div id="right-content">

            </div>
        </div>

    </div>
</div>


这是一个标题！

任何洞察都值得欣赏。

您真正需要做的是将三个元素向左浮动，如果您想要间隔，请在

#main

上设置左/右边距。此解决方案可使文档流中的所有项目保持正常

#main {
    height: 110px;
    width: 715px;
    margin: 0 8px; /* changed 'auto' to '8' to even up padding */
    background-color: #ccc;
    border-radius: 6px;
    float: left; /* added float */
}

#left {
    float: left;
    height: 110px;
    width: 268px;
    margin: 0; /* removed 'auto' because it isn't necessary when floated */
    background-color: #ccc;
    border-radius: 6px;
}

#right {
    display:inline-block;
    float: right; /* no need to adjust this */
    height: 110px;
    width: 268px;
    background-color: #ccc;
    border-radius: 6px;
}