Question

很抱歉，如果这已经在词典中，但我无法找到它。我认为这是一个非常简单的三列标题，我无法使用正确的列与左侧两列对齐。它显示在左列下方，即使有足够的空间。我有三个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>

感谢任何见解。

Answer 1

你真正需要做的只是向左浮动三个元素，如果你想要间距，那么在#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;
}

<强> JSFiddle Demo

右列对齐问题

1 个答案: