在使用draggable& amp;时对齐2个div可调整大小的JQuery UI

时间:2017-05-17 15:26:47

标签: jquery html css jquery-ui

我正在开发一个有趣的小项目来学习JQuery,JQuery UI和JavaScript,但我实际上已经陷入了与CSS / HTML相关的问题,但我认为它与JQuery有关用户界面以及。

我想将下面的2个框彼此对齐,所以水平,但我不能使用flexbox,因为这会破坏可调整大小的功能,而display: inline-block;只是dosnt似乎可以工作。 [![在此处输入图像说明] [1]] [1]

我通过使用flexbox实现了这一点,但正如所说它搞砸了可调整大小的功能,并在改变div / textarea的宽度时使它变得很时髦。

这是两个div的HTML。

<div class='drag resizable'>
<textarea class='resizable' type='text'></textarea>
    <div class='buttonDiv'>
        <i class='fa fa-paint-brush fa-lg color' aria-hidden='true'></i>
        <br>
        <i class='fa fa-trash fa-lg delete' aria-hidden='true'></i>
    </div>
</div>


.buttonDiv {
    background-color: #d9e4e8;
    height: 5.5em;
    border-top-right-radius: 10%;
    border-bottom-right-radius: 10%;
    display: inline-block;

}

.delete, .color{
    margin: 15px 8px 10px 8px;
    color: #364e59;
}
.drag {
    width: 100px;
    height: 100px;
    background-color:transparent;
    margin-bottom: 15px;
    overflow: visible;

}

.drag textarea {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 16px;
    border: none;
}

.drag textarea:focus {
    box-shadow: -5px 5px 20px rgba(0,0,0,0.5);
}
.drag textarea:active {
    box-shadow: -5px 5px 20px rgba(0,0,0,0.5);
}

这是一个JSFiddle

https://jsfiddle.net/wzryne8o/

一个可爱的小伙伴帮助了我,这是解决问题的JSFiddle。

https://jsfiddle.net/v66ad8e3/3/

0 个答案:

没有答案