0

別の #content div にある #left と #right の 2 つの主要な div があり、互いに隣り合っています。#left には jeditable フィールドが含まれています。#right は右に浮かんでいます。

jeditable フィールドをクリックすると、#content の下にジャンプします。ここで試すことができます (「kala」をクリック): http://jsfiddle.net/BuDLC/14/

#right からフローティングを削除すると、フィールドは期待どおりに機能します。入力フィールドは、編集可能な div の上に表示されます。

HTML:

<div id="content">
   <div id="right">
       right
   </div>
   <div id="left">
       <div class="edit">Kala</div>
    </div>
</div>

CSS:

body {
    background: gray;
    height: 100%;
}

.edit {
    border-bottom-style: dotted;
    border-bottom-color: lightgray;
    border-bottom-width: 1px;
    background: green;
}

.edit form,                                                                                                                        
.edit input {
    margin: inherit;
    padding: inherit;
    font: inherit;
    color: inherit;
    background: inherit;
    border: none;

}

#content {
    width: 300px;
    height: 100px;
}

#right {
   float: right;
   width: 100px;
   background-color: khaki;
}

#left {
     width: auto;
     min-width: 150px;
     background-color: blue;
}

#right, #left {
     height: 100%;   
}

MTV お願いします、私の HTML/CSS をポン引きしてください

4

2 に答える 2

0

私はそれを見つけました：私はちょうど追加する必要がありました

margin-right: 100px;

左へ。私は昨日の夜ずっとこれに苦労していましたが、どうやらここで質問する必要があったようです:D

于 2013-03-31T18:37:17.447 に答える