需要修复我的 div 元素以对齐阵容?
Need to fix my div elements to align lineup?
我正在开发一个聊天框,并试图将我的所有元素排列在一个 div(下面的代码)中,但它只是中断并出现在它下面。为什么会这样,如何解决?
非常欢迎任何建议或示例。
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.1;
letter-spacing: .5px;
}
.right {
right:15px;
}
/*............... chatbox ...............*/
.chatbox {
position: absolute;
width: 500px;
border-radius: 0px 0px 30px 30px;
background-color:rgba(0, 0, 0, .4);
}
input[type=text] {
width: 240px;
height: 40px;
border: none;
outline: none;
padding-left: 30px;
font-size: 14px;
color: lightgrey;
font-weight: bold;
font-style: italic;
letter-spacing: .5px;
background-color:transparent;
}
.bubble {
position: absolute;
max-width:200px;
padding: 15px;
padding-top: 0px;
border-radius: 0px 30px 30px 30px;
background-color:rgba(0, 0, 0, .3);
}
/*......... crossfade on buttons .........*/
.hover img{
transition:.3s;
position:absolute;
}
.nohover{
opacity:0;}
a:hover .hover{
opacity:0;
}
a:hover .nohover{
opacity:1;
}
<!--............ chatbox ..............-->
<div class="chatbox">
<!--........ emojis list ........-->
<div style="background:#2f2f2f;height:42px;"><a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover" style="margin-left:-20px;"></a>
<!--....... input message .......-->
<form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!--....... send button .......-->
<b style="margin-left:40px;size:16;line-height:2.9;"><i>Yummi is Typing... </i></b><a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a></div>
<!--....... chatlines .......-->
<div style="height:200px"></div>
只需将 display: flex
添加到第二个 div
,如下所示:
<div style="display: flex; background:#2f2f2f;height:42px;">
<a class="hover" href="emojis.htm">
<img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-
left:-20px;">
<img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover"
style="margin-left:-20px;">
<img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover"
style="margin-left:-20px;">
</a>
您可以使用溢出和浮动来实现此目的。试试这个:
调整输入的宽度,一切都挨着:)
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.1;
letter-spacing: .5px;
}
.right {
right:15px;
}
/*............... chatbox ...............*/
.chatbox {
position: absolute;
width: 500px;
border-radius: 0px 0px 30px 30px;
background-color:rgba(0, 0, 0, .4);
overflow: hidden;
}
input[type=text] {
width: 240px;
height: 40px;
border: none;
outline: none;
padding-left: 30px;
font-size: 14px;
color: lightgrey;
font-weight: bold;
font-style: italic;
letter-spacing: .5px;
background-color:transparent;
float: left;
}
.bubble {
position: absolute;
max-width:200px;
padding: 15px;
padding-top: 0px;
border-radius: 0px 30px 30px 30px;
background-color:rgba(0, 0, 0, .3);
}
/*......... crossfade on buttons .........*/
.hover img{
transition:.3s;
position:absolute;
}
.nohover{
opacity:0;}
a:hover .hover{
opacity:0;
}
a:hover .nohover{
opacity:1;
}
<!--............ chatbox ..............-->
<div class="chatbox">
<!--........ emojis list ........-->
<div style="background:#2f2f2f;height:42px;"><a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover" style="margin-left:-20px;"></a>
<!--....... input message .......-->
<form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!--....... send button .......-->
<b style="margin-left:40px;size:16;line-height:2.9;"><i>Yummi is Typing... </i></b><a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a></div>
<!--....... chatlines .......-->
<div style="height:200px"></div>
我通常使用 flexbox 来创建所需的行为,在这种情况下,我将包含输入和发送按钮的 div 变成了 flexbox-row。您可能需要稍微调整下方字段的宽度,因为 see-through button-text 现在稍微超出了黑色区域。代码在我更改的地方进行了注释。
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.1;
letter-spacing: .5px;
}
.right {
right:15px;
}
/*............... chatbox ...............*/
.chatbox {
position: absolute;
width: 500px;
border-radius: 0px 0px 30px 30px;
background-color:rgba(0, 0, 0, .4);
}
input[type=text] {
width: 240px;
height: 40px;
border: none;
outline: none;
padding-left: 30px;
font-size: 14px;
color: lightgrey;
font-weight: bold;
font-style: italic;
letter-spacing: .5px;
background-color:transparent;
}
.bubble {
position: absolute;
max-width:200px;
padding: 15px;
padding-top: 0px;
border-radius: 0px 30px 30px 30px;
background-color:rgba(0, 0, 0, .3);
}
/*......... crossfade on buttons .........*/
.hover img{
transition:.3s;
position:absolute;
}
.nohover{
opacity:0;}
a:hover .hover{
opacity:0;
}
a:hover .nohover{
opacity:1;
}
/*this is the CSS for the div*/
.chatline {
display: flex;
flex-flow: row nowrap;/*row-behaviour without breaking*/
}
<!--............ chatbox ..............-->
<div class="chatbox">
<!--........ emojis list ........-->
<!--Added a class to this div below!-->
<div class="chatline" style="background:#2f2f2f;height:42px;"><a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover" style="margin-left:-20px;"></a>
<!--....... input message .......-->
<form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!--....... send button .......-->
<b style="margin-left:40px;size:16;line-height:2.9;"><i>Yummi is Typing... </i></b><a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a></div>
<!--....... chatlines .......-->
<div style="height:200px"></div>
我正在开发一个聊天框,并试图将我的所有元素排列在一个 div(下面的代码)中,但它只是中断并出现在它下面。为什么会这样,如何解决?
非常欢迎任何建议或示例。
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.1;
letter-spacing: .5px;
}
.right {
right:15px;
}
/*............... chatbox ...............*/
.chatbox {
position: absolute;
width: 500px;
border-radius: 0px 0px 30px 30px;
background-color:rgba(0, 0, 0, .4);
}
input[type=text] {
width: 240px;
height: 40px;
border: none;
outline: none;
padding-left: 30px;
font-size: 14px;
color: lightgrey;
font-weight: bold;
font-style: italic;
letter-spacing: .5px;
background-color:transparent;
}
.bubble {
position: absolute;
max-width:200px;
padding: 15px;
padding-top: 0px;
border-radius: 0px 30px 30px 30px;
background-color:rgba(0, 0, 0, .3);
}
/*......... crossfade on buttons .........*/
.hover img{
transition:.3s;
position:absolute;
}
.nohover{
opacity:0;}
a:hover .hover{
opacity:0;
}
a:hover .nohover{
opacity:1;
}
<!--............ chatbox ..............-->
<div class="chatbox">
<!--........ emojis list ........-->
<div style="background:#2f2f2f;height:42px;"><a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover" style="margin-left:-20px;"></a>
<!--....... input message .......-->
<form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!--....... send button .......-->
<b style="margin-left:40px;size:16;line-height:2.9;"><i>Yummi is Typing... </i></b><a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a></div>
<!--....... chatlines .......-->
<div style="height:200px"></div>
只需将 display: flex
添加到第二个 div
,如下所示:
<div style="display: flex; background:#2f2f2f;height:42px;">
<a class="hover" href="emojis.htm">
<img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-
left:-20px;">
<img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover"
style="margin-left:-20px;">
<img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover"
style="margin-left:-20px;">
</a>
您可以使用溢出和浮动来实现此目的。试试这个:
调整输入的宽度,一切都挨着:)
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.1;
letter-spacing: .5px;
}
.right {
right:15px;
}
/*............... chatbox ...............*/
.chatbox {
position: absolute;
width: 500px;
border-radius: 0px 0px 30px 30px;
background-color:rgba(0, 0, 0, .4);
overflow: hidden;
}
input[type=text] {
width: 240px;
height: 40px;
border: none;
outline: none;
padding-left: 30px;
font-size: 14px;
color: lightgrey;
font-weight: bold;
font-style: italic;
letter-spacing: .5px;
background-color:transparent;
float: left;
}
.bubble {
position: absolute;
max-width:200px;
padding: 15px;
padding-top: 0px;
border-radius: 0px 30px 30px 30px;
background-color:rgba(0, 0, 0, .3);
}
/*......... crossfade on buttons .........*/
.hover img{
transition:.3s;
position:absolute;
}
.nohover{
opacity:0;}
a:hover .hover{
opacity:0;
}
a:hover .nohover{
opacity:1;
}
<!--............ chatbox ..............-->
<div class="chatbox">
<!--........ emojis list ........-->
<div style="background:#2f2f2f;height:42px;"><a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover" style="margin-left:-20px;"></a>
<!--....... input message .......-->
<form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!--....... send button .......-->
<b style="margin-left:40px;size:16;line-height:2.9;"><i>Yummi is Typing... </i></b><a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a></div>
<!--....... chatlines .......-->
<div style="height:200px"></div>
我通常使用 flexbox 来创建所需的行为,在这种情况下,我将包含输入和发送按钮的 div 变成了 flexbox-row。您可能需要稍微调整下方字段的宽度,因为 see-through button-text 现在稍微超出了黑色区域。代码在我更改的地方进行了注释。
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.1;
letter-spacing: .5px;
}
.right {
right:15px;
}
/*............... chatbox ...............*/
.chatbox {
position: absolute;
width: 500px;
border-radius: 0px 0px 30px 30px;
background-color:rgba(0, 0, 0, .4);
}
input[type=text] {
width: 240px;
height: 40px;
border: none;
outline: none;
padding-left: 30px;
font-size: 14px;
color: lightgrey;
font-weight: bold;
font-style: italic;
letter-spacing: .5px;
background-color:transparent;
}
.bubble {
position: absolute;
max-width:200px;
padding: 15px;
padding-top: 0px;
border-radius: 0px 30px 30px 30px;
background-color:rgba(0, 0, 0, .3);
}
/*......... crossfade on buttons .........*/
.hover img{
transition:.3s;
position:absolute;
}
.nohover{
opacity:0;}
a:hover .hover{
opacity:0;
}
a:hover .nohover{
opacity:1;
}
/*this is the CSS for the div*/
.chatline {
display: flex;
flex-flow: row nowrap;/*row-behaviour without breaking*/
}
<!--............ chatbox ..............-->
<div class="chatbox">
<!--........ emojis list ........-->
<!--Added a class to this div below!-->
<div class="chatline" style="background:#2f2f2f;height:42px;"><a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover" style="margin-left:-20px;"></a>
<!--....... input message .......-->
<form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!--....... send button .......-->
<b style="margin-left:40px;size:16;line-height:2.9;"><i>Yummi is Typing... </i></b><a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a></div>
<!--....... chatlines .......-->
<div style="height:200px"></div>