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

  • Z时代
  • 2024-01-10
  • 分类：问答

我想将.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>

回答：

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

但对于你的问题，

只是删除

height: 100%;

来自代码。

回答：

使用显示内联块如下

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

以上是 如何动态设置div的宽度和高度取决于内容 的全部内容， 来源链接： utcz.com/qa/261537.html

回到顶部