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也不行
左下角的头像要怎么和聊天框对齐呢，看着也别扭
最后就是这么给每个聊天信息配上左下角那个头像，就像微信聊天那样子
谢谢大佬...问题有点多

...全文

195 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 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就成这样了

圈圈_叉叉 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 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;}