jquery - 如何DIV block 不减

Question

我有一个由 div 构建的表格，它的宽度根据您的内容而定。

Html 标签和 body 有宽度和较大的高度，但是，在样式离开:583px 后，div 开始减小其宽度。

在 jsFiddle 示例中，向右拖动表格: https://jsfiddle.net/rafaelcb21/ateL1gje/

我想知道如何通过 body 标签的宽度和高度使 div 在可用空间的任何位置保持相同的大小，但根据您的内容保持宽度？

分区

<div class="table node1" style="left: 583px; top: 121px;">
    <div class="td title">Test - Test</div>
    <div class="td body">Test Operation</div>
    <div class="td body">Test Type Operation</div>
    <div class="td body">Test Operation</div>
    <div class="td body">Test Operation</div>
    <div class="td body">Test Type Operation</div>
    <div class="td body">Test Type Operation</div>
    <div class="td body foot">Test Operation Raise now</div>
</div>

Jquery 和 Jquery 用户界面

$('.node1').draggable();

CSS

html, body {
    padding:0px;
    margin:0px;
    width: 3300px;
    height: 5000px;
}

.table {
    position:absolute;
    cursor:pointer; 
    border: 1px solid #ffffff;
    border-radius: 10px;
    font-family: 'Proxima Nova Bold',"Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;
    font-style: normal;
    font-size: 70%;
    background: #E8EDFF;
}

.td {           
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 7px;
    padding-right: 7px;
    background: #E8EDFF;
    border: 1px solid #ffffff;
}

.title {
    border-top-left-radius: 10px;
    border-top-right-radius:10px;   
    background: #B9C9FE;
    color: #039;
    font-weight: bold;
}

.body {
    color: #669;
}

.body:hover {
    background: #d0dafd;
}

.foot {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius:10px;    
}

Answer 1

要阻止您的 .table 调整大小，请将 min-width 属性添加到它的 css:

.table {
    position:absolute;
    cursor:pointer; 
    border: 1px solid #ffffff;
    border-radius: 10px;
    font-family: 'Proxima Nova Bold',"Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;
    font-style: normal;
    font-size: 70%;
    background: #E8EDFF;
    min-width:150px /*new style */
}

Demo here