如何使div的宽度与内容一致

Question

我正在尝试构建一个动态对话框控件，该控件可用于该对话框所需的任何类型的内容。它包含一个主容器，标题（用于对话框标题），正文内容和页脚（用于按钮）。我已经设法让它工作，所以高度是根据窗口的内容和视图高度动态调整，但我不能得到相同的宽度。

这是我到目前为止所得到的。正如您所看到的，对话框的宽度被强制使用max-width，该max-width被定义为仅在内容需要时才使用该CSS定义。

.dialog-box2{
  position: relative;
  min-width: 400px;
  max-width: calc(90vw - 100px); 
  margin: 20px auto;
  margin-bottom: 0; 
}

.dialog-content{
  position: relative;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba (0,0,0,.2);
  outline: 0;
  box-shadow:0 3px 9px rgba(0,0,0,.2);
  margin-top: 100px;
  min-height: 185px;
}

.dialog-header{
  min-height: 6.43px
  padding: 15px;
  padding-bottom: 0;
  margin-bottom: -1px;
}

.dialog-title{
  padding-bottom: 5px;
  margin:0;
  line-height: 1.43;
  border-bottom: 1px solid #0290d7;
 }

h3{
  font-size: 16px;
 }

.dialog-body{
  position: relative;
  padding: 15px;
  max-height: calc(85vh - 250px);
  overflow-y: scroll;
  margin-bottom: 30px;
}

.dialog-footer{
  padding: 15px;
  overflow: hidden;
  background-color: #eee;
  border-top: 1px solid #ccc;
 }

/*---------- for testing only ---------------------*/
.profile-btn{
  border: 1px solid #CCCCCC;
  border-bottom: 15px solid #0290D7;
  width: 120px;
  height: 140px;
  margin: 20px 20px 0 0;
  padding-top: 35px;
  color: #0290D7;
  text-align: center;
  float: left;
}

<div class="dialog-box2">
          <div class="dialog-content">
            <div class="dialog-header">
              <h3 class="dialog-title" id="myDialogLabelDefault">Dialog Title</h3>
            </div>
            <div class="dialog-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum nisi est sed incidunt magni maxime? Praesentium itaque sed nihil veritatis. Dolorem autem, alias reprehenderit facilis deserunt voluptatum dolore natus. Impedit.</p>
              
                <div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div><!-- 
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>
                  <div class="profile-btn">Thing</div>-->
                </div>
              
            </div>
            <div class="dialog-footer">
              <div class="prev">
                <button type="button" class="btn btn-primary-outline">Save as Profile</button>
              </div>
              <div class="sc-next">
                <button type="button" class="btn-link dialog-cancel" data-close="dialog">Cancel</button>
                <span class="sc-dialog-bullet"></span>
                <button type="button" class="btn btn-primary-outline">Outlined 2nd Btn</button>
                <button type="button" class="btn btn-primary">OK</button>
              </div>
            </div>
          </div>
        </div>

以下是我用上述代码得到的内容以及问题所在的示例，以防我对我要完成的内容的解释不明确。

我做错了什么，我觉得我已经尝试了我能想到的一切。

提前感谢您的帮助！

Answer 1

您可以尝试使用display: flex;或display:inline-block;

.dialog-box2{
 display: flex;
 justify-content: center;
 min-width: 400px;
 max-width: 90%; 
 margin: 20px auto;
 margin-bottom: 0; 
}

你可能必须正确地将div放在中心位置，但内容应该很好地适应。

Answer 2

从while ((p=strtok(NULL, " "))!= NULL && (count <= size - 1)) {...} div。

中删除max-width属性

Answer 3

设置任何宽度列可防止 div 拉伸，但取消设置所有宽度允许元素拉伸...

.dialog-box2{
    min-width: unset;
    width: unset;
    max-width: unset;
}

相对于页面上的其他元素，页面布局需要 flex 属性，但不会影响问题的解决方案，所以我省略了它。