如何根据内容动态设置div的宽度和高度

Question

我想将.editBokningar div设置为在添加内容时动态更改。由于100%，它现在几乎占据了整个屏幕。我怎样才能以最佳方式实现这一目标？这里的Snippet高度不准确。在片段中，高度保持靠近锥形。

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

Answer 1

只需使元素内联块并删除高度/宽度属性：

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

Answer 2

由于EditBoking是div，它是一个块元素，因此没有必要定义width：100％，因为它默认占用整个空间

但是对于你的问题，

只是删除

height: 100%;

从代码。

Answer 3

使用display inline-block如下所示

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