Nested Divs backspace issue
I have an issue regarding nested divs. Both of the divs are editable. The issue is if I write content in the div (i.e simple text) and then put my cursor on the start of inner(chil开发者_如何学运维d) div and then press backspace it shifts the text in parent div. Why is it happening? I know this is the default behavior. And What could be the solution for this problem?
<head>
<title>----</title>
</head>
<body style="100%">
<br />
<br />
<br />
<div contenteditable="true" style="min-height:80%; min-width:100%; background-color:#00ffff">
<div id="test" style="margin:auto; width:100%; background-color:#e3e3e3;
border-width:5px; border-color:e9e9e9; word-wrap: break-word; overflow:hidden;
min-height:25px;" contenteditable="true">
Child Div Text here!!!
</div>
Parent Div Text Here
</div>
</body>
regards, Ahmed
This may no be completely correct, but I think the reason that your divs are shifting is because of the way you set your width of the child div. If you do width:100% on the child div then the size of that div will stretch to include all of the spacing. You have also not specified any position attributes, so the parent div will put itself right next to the child div. This means that any changes to the child divs position and width (which will change with the number of ' 's you have) will also change the parent divs position. If you do not want the parent div to move, then you need to either A) Specify a set width for the child div or, B) Set a position for each div. If you had a css file it would look something like this:
A)
/* You would need to add IDs to each div so I am just going to do child */
#child
{
width: 200px; /* Set number */
}
OR
B)
#child
{
position: absolute /* Or however you wish to do this */
top: 10px; /* Some number */
left: 10px; /* Again whatever number */
}
加载中,请稍侯......
精彩评论