如何动态设置div的宽度和高度取决于内容

问题描述：

我想将.editBokningar div设置为在添加内容时动态更改。由于100%，它现在几乎占据了整个屏幕。我怎样才能实现这个最好的方式？片段高度在此处不准确。在片段中，高度保持接近于内容。如何动态设置div的宽度和高度取决于内容

.EditBoking { 
 
     width: 100%; 
 
     height: 100%; 
 
     margin: 15px 0px 15px 0px; 
 
     background-color: #E1E777; 
 
     border-radius: 10px; 
 
     text-align: center; 
 
     padding-top: 15px; 
 
    } 
 

 
    .title { 
 
     font-weight: bold; 
 
     color: #FF3333; 
 
    } 
 

 
    .listOneRow { 
 
     display: inline-block; 
 
     font-weight: bold; 
 
    } 
 
     ul { 
 
     list-style-type: none; 
 
     padding: 0; 
 
    }

 <div class="EditBoking"> 
 
       <div class="title"> 
 
        Din nuvarande bokning 
 
       </div> 
 
       <div> 
 
        <ul class="listOneRow"> 
 
         <li> 
 
          <span>Startdatum: 2017-12-12</span> 
 
         </li> 
 
         <li> 
 
          <span>Slutdatum: 2017-12-12</span> 
 
         </li> 
 
         <li> 
 
          <span>Program: some program</span> 
 
         </li> 
 
         <li> 
 
          <span>Miljö: Arrendator</span> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div>

答

只需让你的元件内联块和删除高度/宽度属性：

.EditBoking { 
 
    display:inline-block; 
 
    margin: 15px 0px 15px 0px; 
 
    background-color: #E1E777; 
 
    border-radius: 10px; 
 
    text-align: center; 
 
    padding-top: 15px; 
 
} 
 

 
.title { 
 
    font-weight: bold; 
 
    color: #FF3333; 
 
} 
 

 
.listOneRow { 
 
    display: inline-block; 
 
    font-weight: bold; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
}

<div class="EditBoking"> 
 
    <div class="title"> 
 
    Din nuvarande bokning 
 
    </div> 
 
    <div> 
 
    <ul class="listOneRow"> 
 
     <li> 
 
     <span>Startdatum: 2017-12-12</span> 
 
     </li> 
 
     <li> 
 
     <span>Slutdatum: 2017-12-12</span> 
 
     </li> 
 
     <li> 
 
     <span>Program: some program</span> 
 
     </li> 
 
     <li> 
 
     <span>Miljö: Arrendator</span> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div class="EditBoking"> 
 
    <div class="title"> 
 
    Din nuvarande bokning 
 
    </div> 
 
    <div> 
 
    <ul class="listOneRow"> 
 
     <li> 
 
     <span>Startdatum: 2017-12-12</span> 
 
     </li> 
 
     <li> 
 
     <span>Slutdatum: 2017-12-12</span> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div class="EditBoking"> 
 
    <div class="title"> 
 
    Din nuvarande bokning 
 
    </div> 
 
    <div> 
 
    <ul class="listOneRow"> 
 
     <li> 
 
     <span>Startdatum: 2017-12-12</span> 
 
     </li> 
 
     <li> 
 
     <span>Slutdatum: 2017-12-12</span> 
 
     </li> 
 
    </ul> 
 
    <ul class="listOneRow"> 
 
     <li> 
 
     <span>Startdatum: 2017-12-12</span> 
 
     </li> 
 
     <li> 
 
     <span>Slutdatum: 2017-12-12</span> 
 
     </li> 
 
    </ul> 
 
    <ul class="listOneRow"> 
 
     <li> 
 
     <span>Startdatum: 2017-12-12</span> 
 
     </li> 
 
     <li> 
 
     <span>Slutdatum: 2017-12-12</span> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

谢谢！为您的帮助 – AllramEst

答

作为EditBoking是DIV这是一个块的元素，它是没有必要定义宽度：100％，因为它会默认占据整个空间

但对于你的问题，

只是删除

height: 100%;

来自代码。

肯定的。现在高度可以，我应该怎么处理宽度？ – AllramEst

'.listOneRow {display：inline-block}'也是不必要的。 – VXp

你是对的，它是一个不同风格的遗留物 – AllramEst

答

使用显示内联块如下

.EditBoking{ 
display: inline-block; 
height:auto; 
}

谢谢！您的帮助 – AllramEst

如何动态设置div的宽度和高度取决于内容

相关推荐