当我调整浏览器窗口内容时div中的内容来自div它不应该出来

时间:2018-04-19 09:43:56

标签: html css

enter image description here当我调整浏览器窗口大小时,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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
lst = ['2018-05-1015:15:25', '2017-12-0120:25:02']

res = list(map(lambda x: datetime.strptime(x, '%Y-%m-%d%H:%M:%S').strftime('%d-%m-%Y'), lst))

print(res)

# ['10-05-2018', '01-12-2017']
&#13;
.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
} */
&#13;
&#13;
&#13;

HTML代码:(一起)

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