如何DIV块不减

Question

我有一个 table 由 div 构建，它的宽度与您的内容一致。

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

在 jsFiddle 示例中将 table 拖到右侧： https://jsfiddle.net/rafaelcb21/ateL1gje/

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

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 UI

$('.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

Answer 2

添加最小宽度属性是确保宽度永远不会太小的好主意，如果这导致您的 div 流出页面，您可以设置一个

margin-left: 583px;
min-width: 150px;

属性而不是

left: 583px;

Answer 3

我找到了解决方案，我添加 display: table; https://jsfiddle.net/rafaelcb21/ateL1gje/3/

How to make div not larger than its contents?

.table {
     display: table; /*new style */
     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;
}

如何DIV块不减

How to DIV block does not decrease

css

jquery

jquery-ui

css-tables