Question

我是网络开发的新手，我正在尝试使用SQL创建一个简单的聊天页面。这就是我目前所拥有的：Codepen

HTML：

<body>
    <div id="overlay"></div>
    <div id="header">
        <div id="logo">
            <a href="http://csgovoid.net"></a>
        </div>
    </div>

    <div id="chat_extended">
        <div id="chat_area"></div>
        <input id="chat_input" type="text" placeholder="Chat...">
        <button id="send_button" onClick="send()">SEND</button>
    </div>
</body>

CSS：

html,
body {
    background-color: #333;
    margin: 0;
    padding: 0;
}

#overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background: #ccc;
    background: -webkit-linear-gradient(right top, #8900AB, #282828);
    background: -o-linear-gradient(top right, #8900AB, #282828);
    background: -moz-linear-gradient(top right, #8900AB, #282828);
    background: linear-gradient(to top right, #8900AB, #282828);
}

#header {
    position: absolute;
    background: #404040;
    width: 100%;
    height: 10%;
    border-bottom: 10px solid #9800AB;
}

#logo {
    position: absolute;
    background-image: url(http://csgovoid.net/img/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

#chat_extended {
    position: absolute;
    background: #404040;
    margin-top: 3.15%;
    width: 20%;
    height: 100%;
    float: right;
    border-left: 10px solid #9800AB;
    text-align: center;
    padding-top: 5%;
}

#chat_area {
    position: absolute;
    background: #ccc;
    width: 100%;
    height: 100%;
    text-align: left;
}

聊天窗口应与左侧对齐，聊天区域内的聊天区域如下：

Answer 1

你不需要浮动：正确使用position：absolute，只需删除它并添加权限：0到＃chat-extended

#chat_extended {
position: absolute;
background: #404040;
width: 20%;
height: 100%;
border-left: 10px solid #9800AB;
text-align: center;
right: 0;

希望这有帮助！

Answer 2

float属性不适用于绝对定位的元素。

在#chat_extended上，替换为：

float: right;

用这个：

right: 0;

像这样的绝对定位对于这样的布局来说并不是最佳实践，所以一旦你感觉更舒服，你可能想要改变它。

定位div＃2

2 个答案: