如何使用css使内容适合div

Question

如何使内部div适合下面的html中的内容 我尝试使用display：inline-block但它将第二个div移动到底部。

＆＃13;

＆＃13;

<div class="ms-table">
  <div class="tableCol-75">
  </div>
  <div class="tableCol-25">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你去了：

＆＃13;

＆＃13;

.ms-table {
  width: 80%;
}

.tableCol-70 {
  float: left;
  width: 70%;
  border: 1px solid black;
  margin-right: 10px;
}

.tableCol-25 {
  float: left;
  width: 25%;  
  border: 1px solid blue;
}

＆＃13;

<div class="ms-table">
  <div class="tableCol-70">
    My name is abc and I live in ams.
  </div>
  <div class="tableCol-25">
    I love junk food even though it is unhealthy
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用display: table

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.ms-table{    
    display: table;
    width: 100%;
    height: 100px;
}
.table-cell{
    display: table-cell;
    vertical-align: top;
    padding: 15px;
}
.tableCol-75{
    width: 75%;
    background: #ccc;
}
.tableCol-25{
    width: 25%;
    background: #000;
    color: #fff;
}

<div class="ms-table">
  <div class="table-cell tableCol-75">75%</div>
  <div class="table-cell tableCol-25">25%</div>
</div>

使用display: inline-block;

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.ms-table{       
    width: 100%;
    min-height: 100px;
}
.table-cell{
    display: inline-block;
    vertical-align: top;
    padding: 15px;
}
.tableCol-75{
    width: 75%;
    background: #ccc;
}
.tableCol-25{
    width: 25%;
    background: #000;
    color: #fff;
}

<div class="ms-table">
  <div class="table-cell tableCol-75">75%</div><!--
  --><div class="table-cell tableCol-25">25%</div>
</div>