div浮动等一系列问题

xunfengqi 2018-07-09 05:29:21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div0{
width: 268px;
height: 358px;
margin:10px auto;
position:relative;
background-image: url("3.jpg");
}
#div1{
border: black 2px solid;
width: 264px;
height: 316px;
overflow: auto;
}
.div2{
border: white 1px solid;
float: left;
background-color: yellow;
max-width: 200px;
}
.div3 {
border: white 1px solid;
float: right;
background-color: cornflowerblue;
max-width: 200px;
}
img{
border: 1px black solid;
}
</style>
<script>
window.onload = function (){
var oDiv1=document.getElementById('div1');
var oImg1=document.getElementById('img1');
var oInput1=document.getElementById('input1');
var oSub1=document.getElementById('sub1');
var num=1;
var str='';
oImg1.onclick=function(){
if(num==1){
oImg1.src='2.png';
num=2;
}
else{
oImg1.src='1.png';
num=1;
}
};
oSub1.onclick=function() {
if (num==1) {
if (oInput1.value != '') {
str = str + '<div class="div2">' + oInput1.value + '</div>' + '<br>';
oDiv1.innerHTML = str;
oInput1.value = "";
oDiv1.scrollTop = oDiv1.scrollHeight;
} else {
alert('输入框不能为空!!!!!!!!!!')
}
}
else{
if (oInput1.value != '') {
str = str + '<div class="div3">' + oInput1.value + '</div>' + '<br>';
oDiv1.innerHTML = str;
oInput1.value = "";
oDiv1.scrollTop = oDiv1.scrollHeight;
} else {
alert('输入框不能为空!!!!!!!!!!')
}
}
}
};
</script>
</head>
<body>
<div id="div0">
<div id="div1"></div>
<img src="1.png" id="img1">
<input type="text" id="input1">
<input type="submit" value="发送" id="sub1">
</div>
</body>
</html>

主要问题就是这个聊天窗口要怎么往左靠,而不是这样梯形的...
然后就是我给每个聊天信息都加了换行,但是也没有换行,这是为什么
我试着加margin-buttom也不行
左下角的头像要怎么和聊天框对齐呢,看着也别扭
最后就是这么给每个聊天信息配上左下角那个头像,就像微信聊天那样子
谢谢大佬...问题有点多
...全文
198 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
xunfengqi 2018-07-12
  • 打赏
  • 举报
回复
引用 7 楼 qq_41550031 的回复:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div0{
width: 268px;
height: 358px;
margin:10px auto;
position:relative;
background-image: url("img/head.jpg");
}
#div1{
border: black 2px solid;
width: 264px;
height: 316px;
overflow: auto;
}
img{
border: 1px black solid;
}
/*这里我用了两种方法,左边对话是不用浮动,右边方法是使用浮动*/
.div2{
border: white 1px solid;
border-radius: 5px;/*更加圆滑*/
/*float: left;不能加浮动*/
background-color: yellow;
max-width: 200px;
/*使文字的样式变为行内的快元素与img水平显示*/
display: inline-block;
/*word-wrap:break-word;*/
/*使文字超过长度换行*/
word-break:break-all;
overflow: hidden;
}
#img2{
margin-right: 5px;
}
/*使他两在同一行显示*/
#img2,.div2{
vertical-align: top;
}
.div3 {
border: white 1px solid;
border-radius: 5px;
float: right;
background-color: cornflowerblue;
max-width: 200px;
display: inline-block;
word-break:break-all;
overflow: hidden;
}
#img3{
float: right;
}
/*消除右边浮动对它的影响*/
.line{
display: block;
clear: both;
}
/*让他们三个居中对齐*/
#input1,#sub1,#img1{
vertical-align: middle;
}
</style>
<script>
window.onload = function (){
var oDiv1=document.getElementById('div1');
var oImg1=document.getElementById('img1');
var oInput1=document.getElementById('input1');
var oSub1=document.getElementById('sub1');
var num=1;
var str='';
oImg1.onclick=function(){
if(num==1){
oImg1.src='2.png';
num=2;
}
else{
oImg1.src='1.png';
num=1;
}
};
//给每一行包个class为line的div
oSub1.onclick=function() {
if (num==1) {
if (oInput1.value != '') {
str = str+'<div class="line"><img src="1.png" id="img2">'
+ '<div class="div2">'+ oInput1.value + '</div></div>';
oDiv1.innerHTML = str;
oInput1.value = "";
oDiv1.scrollTop = oDiv1.scrollHeight;
} else {
alert('输入框不能为空!!!!!!!!!!')
}
}
else{
if (oInput1.value != '') {
str = str + '<div class="line"><img src="1.png" id="img3">'
+ '<div class="div3">' + oInput1.value + '</div></div>';
oDiv1.innerHTML = str;
oInput1.value = "";
oDiv1.scrollTop = oDiv1.scrollHeight;
} else {
alert('输入框不能为空!!!!!!!!!!')
}
}
}
};
</script>
</head>
<body>
<div id="div0">
<div id="div1"></div>
<!--这里为啥img的高度没有限制-->
<img src="1.png" id="img1">
<input type="text" id="input1">
<input type="submit" value="发送" id="sub1">
</div>
</body>
</html>


还有点优化,每个对话的高度和按enter发送消息
谢谢带哥,我回去好好研究下
xunfengqi 2018-07-12
  • 打赏
  • 举报
回复
引用 6 楼 Logerlink 的回复:
[quote=引用 5 楼 xunfengqi 的回复:]
按照你说的去掉<br>和float:left再加上display:inline-block就成这样了

我的表述有误,我的意思是说<br>和浮动不要同时存在
去掉浮动 <br>保留
-------------------------------------------
将.div2换成这个
.div2 {
display: inline-block;
border: white 1px solid;
background-color: yellow;
max-width: 200px;
}
input对齐的话,要保证三者同一个高度然后再加上这个
#input1,
#sub1{vertical-align: top;}
[/quote]但是你这个治标不治本啊,我的div3没办法像div2一样修改啊
Logerlink 2018-07-11
  • 打赏
  • 举报
回复
引用 5 楼 xunfengqi 的回复:
按照你说的去掉<br>和float:left再加上display:inline-block就成这样了

我的表述有误,我的意思是说<br>和浮动不要同时存在
去掉浮动 <br>保留
-------------------------------------------
将.div2换成这个
.div2 {
display: inline-block;
border: white 1px solid;
background-color: yellow;
max-width: 200px;
}
input对齐的话,要保证三者同一个高度然后再加上这个
#input1,
#sub1{vertical-align: top;}
圈圈_叉叉 2018-07-11
  • 打赏
  • 举报
回复
补充一哈


强迫症。。。
圈圈_叉叉 2018-07-11
  • 打赏
  • 举报
回复
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div0{
width: 268px;
height: 358px;
margin:10px auto;
position:relative;
background-image: url("img/head.jpg");
}
#div1{
border: black 2px solid;
width: 264px;
height: 316px;
overflow: auto;
}
img{
border: 1px black solid;
}
/*这里我用了两种方法,左边对话是不用浮动,右边方法是使用浮动*/
.div2{
border: white 1px solid;
border-radius: 5px;/*更加圆滑*/
/*float: left;不能加浮动*/
background-color: yellow;
max-width: 200px;
/*使文字的样式变为行内的快元素与img水平显示*/
display: inline-block;
/*word-wrap:break-word;*/
/*使文字超过长度换行*/
word-break:break-all;
overflow: hidden;
}
#img2{
margin-right: 5px;
}
/*使他两在同一行显示*/
#img2,.div2{
vertical-align: top;
}
.div3 {
border: white 1px solid;
border-radius: 5px;
float: right;
background-color: cornflowerblue;
max-width: 200px;
display: inline-block;
word-break:break-all;
overflow: hidden;
}
#img3{
float: right;
}
/*消除右边浮动对它的影响*/
.line{
display: block;
clear: both;
}
/*让他们三个居中对齐*/
#input1,#sub1,#img1{
vertical-align: middle;
}
</style>
<script>
window.onload = function (){
var oDiv1=document.getElementById('div1');
var oImg1=document.getElementById('img1');
var oInput1=document.getElementById('input1');
var oSub1=document.getElementById('sub1');
var num=1;
var str='';
oImg1.onclick=function(){
if(num==1){
oImg1.src='2.png';
num=2;
}
else{
oImg1.src='1.png';
num=1;
}
};
//给每一行包个class为line的div
oSub1.onclick=function() {
if (num==1) {
if (oInput1.value != '') {
str = str+'<div class="line"><img src="1.png" id="img2">'
+ '<div class="div2">'+ oInput1.value + '</div></div>';
oDiv1.innerHTML = str;
oInput1.value = "";
oDiv1.scrollTop = oDiv1.scrollHeight;
} else {
alert('输入框不能为空!!!!!!!!!!')
}
}
else{
if (oInput1.value != '') {
str = str + '<div class="line"><img src="1.png" id="img3">'
+ '<div class="div3">' + oInput1.value + '</div></div>';
oDiv1.innerHTML = str;
oInput1.value = "";
oDiv1.scrollTop = oDiv1.scrollHeight;
} else {
alert('输入框不能为空!!!!!!!!!!')
}
}
}
};
</script>
</head>
<body>
<div id="div0">
<div id="div1"></div>
<!--这里为啥img的高度没有限制-->
<img src="1.png" id="img1">
<input type="text" id="input1">
<input type="submit" value="发送" id="sub1">
</div>
</body>
</html>


还有点优化,每个对话的高度和按enter发送消息
xunfengqi 2018-07-11
  • 打赏
  • 举报
回复
引用 2 楼 Logerlink 的回复:
有浮动就不要<br>了
将.div2换成这个
.div2 {
display: inline-block;
border: white 1px solid;
background-color: yellow;
max-width: 200px;
}
input对齐的话,要保证三者同一个高度然后再加上这个
#input1,
#sub1{vertical-align: top;}

按照你说的去掉<br>和float:left再加上display:inline-block就成这样了
xunfengqi 2018-07-11
  • 打赏
  • 举报
回复
引用 1 楼 winzond 的回复:
问题一:.div2取消float: left自然换行靠左
问题二:最下面一行单独设置一个容器,CSS添加vertical-align属性,参见http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp
你的取消float:left会让所有内容都变成固定的最大宽度了
xunfengqi 2018-07-11
  • 打赏
  • 举报
回复
引用 1 楼 winzond 的回复:
问题一:.div2取消float: left自然换行靠左
问题二:最下面一行单独设置一个容器,CSS添加vertical-align属性,参见http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp
div3也有一样的问题啊,你这样就只是解决div2的问题
Logerlink 2018-07-09
  • 打赏
  • 举报
回复
有浮动就不要<br>了
将.div2换成这个
.div2 {
display: inline-block;
border: white 1px solid;
background-color: yellow;
max-width: 200px;
}
input对齐的话,要保证三者同一个高度然后再加上这个
#input1,
#sub1{vertical-align: top;}

winzond 2018-07-09
  • 打赏
  • 举报
回复
问题一:.div2取消float: left自然换行靠左 问题二:最下面一行单独设置一个容器,CSS添加vertical-align属性,参见http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

87,955

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧