当我在 div 中调整浏览器窗口内容的大小时，它不应该来自 div答案

【问题标题】：when i resize browser window content in div comes out from div it should not come out from当我在 div 中调整浏览器窗口内容的大小时，它不应该来自 div
【发布时间】：2018-04-20 14:23:15
【问题描述】：

当我调整浏览器窗口的大小时，div 中的内容会从 div 中出来。当我缩小和放大浏览器窗口时，它应该保持在其位置，无论浏览器窗口的宽度和高度如何，并且内容 div 必须根据浏览器的动态高度和宽度自动调整：

.item: {
  display: table;
  word-break: break-all;
  white-space: nowrap;
  border: 1px;
  border-style: solid;
  border-color: silver;
  border-radius: 4px;
  );
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.awesome {
  border-right: 1px solid rgba(0, 0, 0, .12);
  margin: auto;
  padding: 16px;
  -webkit-text-size-adjust: none;
  font-size: 20px;
  color: white;
  display: table-cell;
  font-size: 1em;
}

.fa-bars: {
  position: absolute;
  top: 15px;
  right: 16px;
  font-size: 5em;
  color: coral;
  display: table-cell
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
</head>

<body>
  <div >
    <ul>
      <li gridster-item="item" ng-repeat="item in Items">
        <div class="awesome">hello world
          <i class="fa fa-bars"></i></div>
      </li>
    </ul>
  </div>
</body>

</html>

【问题讨论】：

HTML 与 CSS 不匹配：CSS 中的选择器 .gridster 将匹配具有类“gridster”的元素，而不是具有名为 gridster 的属性的元素。除非您遗漏了一些重要信息！此外，您不应该在没有表格行和单元格的表格元素中直接使用块元素；并非所有浏览器都可以以相同的方式处理此问题。你在 CSS 中缺少一个分号。而top 属性在非定位元素中没有任何作用。
好的，谢谢@李斯特先生
我该如何解决
首先，创建一个minimal reproducible example 来演示该问题。调整窗口大小时，您问题中的源当前不显示 ul 从 div 出来。另外，修复错误。并告诉我们您正在使用哪些库；我可以在网上找到多个名为“gridster”的东西，所以很高兴提及您指的是哪一个。
感谢@mr lister 我需要的是 div 中的内容在我调整浏览器大小时从 div 出来

标签： html css

【解决方案1】：

.item {
  display: table;
  width: auto;
  height: auto;
  word-break: break-all;
  white-space: nowrap;
  border: 1px;
  border-style: solid;
  border-color: silver;
  border-radius: 4px;
}
@-ms-viewport{
  width: device-width;
}
.awesome {
  padding: 10px 0;
  box-shadow: none;
  border-radius: 0;
  background: none;
  text-align: center;
  color: #30a5ff;
  top: 105px;
  text-align: center font-size: 1em;
}


/*
.fa-check-square:before {
  top: 15px;
  right: 16px;
  font-size: 5em;
  color: coral;
  display: table-cell
} */

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height, initial-scale=1">
<div gridster="gridsterOpts" align="center">
  <ul>
    <li gridster-item="item" ng-repeat="item in Items" class="item" align="center">
      <h2 class="awesome" align="right">Hello world! <i class="fa fa-check-square" aria-hidden="true"></i></h2>
    </li>
  </ul>
</div>

HTML 代码：（合）

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height, initial-scale=1">
<style>
.item {
  display: table;
  width: auto;
  height: auto;
  word-break: break-all;
  white-space: nowrap;
  border: 1px;
  border-style: solid;
  border-color: silver;
  border-radius: 4px;
}
@-ms-viewport {
 width: device-width;
}
.awesome {
  padding: 10px 0;
  box-shadow: none;
  border-radius: 0;
  background: none;
  text-align: center;
  color: #30a5ff;
  top: 105px;
  text-align: center font-size: 1em;
}


/*
.fa-check-square:before {
  top: 15px;
  right: 16px;
  font-size: 5em;
  color: coral;
  display: table-cell
} */
</style>
</head>
<body>
<div gridster="gridsterOpts" align="center">
  <ul>
    <li gridster-item="item" ng-repeat="item in Items" class="item" align="center">
      <h2 class="awesome" align="right">Hello world! <i class="fa fa-check-square" aria-hidden="true"></i></h2>
    </li>
  </ul>
</div>
</body>
</html>

【讨论】：

让我们continue this discussion in chat.