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也不行
左下角的头像要怎么和聊天框对齐呢，看着也别扭
最后就是这么给每个聊天信息配上左下角那个头像，就像微信聊天那样子
谢谢大佬...问题有点多
...全文
179 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
IE bug input 外层浮动的边距问题
这不是真正的padding 或者 margin，而是一个IE 系列解析的bug。无论清楚input 还是div 的margin，padding值。那个边距仍然存在。据称，这个边距的值为5em，本人没有做验证，但暂时相信吧！ 主要是说一下解决方案： ...
利用HTML+CSS进行页面布局（div的浮动效果）
（利用一系列图片来解释什么叫浮动） 我们利用float:left;进行div浮动时，会有一个立体的抽象浮动过程，浮动的div会上向左移，而跟在下面的div会占据第一个div的位置，这个过程就叫做浮动。 <!DOCTYPE html>...
DIV浮动层绝对居中定位用CSS怎么写
DIV浮动层绝对居中定位用CSS怎么写？来源：兼职网站大全作者：懒人建站日期：2014-10-13人气:27132DIV浮动层绝对居中定位用CSS怎么写？详细解说，直接看样式，下面的写法兼容IE系列浏览器和火狐浏览器。DIV浮动层...
div探索系列（二）：让多个div显示在一行（浮动的div）
 对前面的div元素设置浮动属性后，当前面的div元素留有足够的空白宽度时，后面的div元素将自动浮上来，和前面的div元素并列于一行.（二）floate属性值有如下取值(1)left:块状元素向左移动(2)right:块状元素向右移动...
利用DIV的浮动与定位进行网页布局
利用DIV的浮动与定位进行网页布局  ...浮动有一系列控制它的规则。  1.浮动元素的外边缘不会超过其父元素的内边缘。  2.浮动元素不会互相重叠。  3.浮动元素不会上下浮动。  4.如果一个浮动元素在另一
JavaScript

87,838

社区成员

224,614

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章