如何動態設置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>

來源

2017-12-18 AllramEst

只需讓你的元件內聯塊和刪除高度/寬度屬性：

.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>

來源

2017-12-18 07:55:54

謝謝！爲您的幫助 – AllramEst

作爲EditBoking是DIV這是一個塊的元素，它是沒有必要定義寬度：100％，因爲它會默認佔據整個空間

但對於你的問題，

只是刪除

height: 100%;

來自代碼。

來源

2017-12-18 07:49:20 Sonia

肯定的。現在高度可以，我應該怎麼處理寬度？ – AllramEst

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

你是對的，它是一個不同風格的遺留物 – AllramEst

使用顯示內聯塊如下

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

來源

2017-12-18 07:57:53

謝謝！您的幫助 – AllramEst

如何動態設置div的寬度和高度取決於內容

回答

相關問題