Question

我有一个由div构建的表格，它的宽度与您的内容相符。

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

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

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

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

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

String content = templateEngine.process("activationEmail", context);

属性而不是

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

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阻止不会减少

3 个答案: