Question

编辑：聊天窗口应该与右边对齐，聊天窗口中的聊天区域就像这样，为什么不是这样？：Codepen

应该是这样的：

我希望制作一个侧面有标题和矩形的简单网站。出于某种原因，我无法正确定位我的徽标！我目前有什么：

＆＃13;

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%;
}

#logo {
    position: absolute;
    background-image: url(http://csgovoid.net/img/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
}

＆＃13;

<html>

<body>
    <div id="overlay"></div>
    <div id="header">
        <div id="logo"></div>
    </div>
    <div id="Seperator_H01"></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</buttton>
    </div>
    <div id="Seperator_V01"></div>
</body>

</html>

＆＃13;

CodePen

我想要实现的目标：

（文字输入和发送按钮不包含在图片中。）

Answer 1

看起来你需要添加宽度和高度:)默认情况下div的高度和宽度为零，因为那里没有任何内容你需要设置它！

Answer 2

这是一个小提琴：https://jsfiddle.net/5odd0q1n/

CSS：

html,
body {
    background-color: #333;
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
}

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

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

HTML :(您在</button>中输了错误）

<html>
<body>
    <div id="overlay"></div>
    <div id="header">
        <div id="logo"></div>
    </div>
    <div id="Seperator_H01"></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>
    <div id="Seperator_V01"></div>
</body>
</html>

对于责任人来说，绝对位置是不利的，因为你不能仅使用css获得相对于parrent的宽度或高度：）

无论如何你在标题上要求边框线：https://jsfiddle.net/5odd0q1n/3/（你可以在这里找到）

你只需要添加

border-bottom: 10px solid purple ;

到#header：）

Answer 3

你需要添加img标签;

<div id="logo">
<img src="http://csgovoid.net/img/logo.png">
</div>

and add following css:

#logo img{
   width:2%;
    //background stuff is removed -- not required in this case

}

#chat_extended
{   text-align:center;
    padding-top:5%;
}

#header {
    position: absolute;
    background: #404040;
    width: 100%;
 //height is removed -- not required
}

如何正确定位徽标？

3 个答案: