主页 / 问题 / 1018978
Accepted
Максим Червяков
Asked:2020-08-30 20:51:54 +0000 UTC2020-08-30 20:51:54 +0000 UTC

如何包装一个列表？

  • 772

有这样的代码（形象地）：

* {
  box-sizing: border-box;
}
.wrapper {
  width: 600px;
  margin: 0 auto;
  background-color: green;
}

.clearfix::after {
    clear: both;
    display: table;
    content: "";
}

.clearfix::before {
    display: table;
    content: "";
}
.title {
  width: 200px;
  background-color: red;
  height: 50px;
  float: right;
}
.text {
  width: 200px;
  height: 50px;
  background-color: yellow;
  float: left;
}
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-flex;
  width: 200px;
  height: 50px;
  text-align: center;
  font-size: 30px;
  background-color: blue;
  border: 1px solid red;
}
<div class="wrapper clearfix">
  <div class="title">
    fet fet fet fet
  </div>
  <ol>
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
  </ol>
    <div class="text">
    fet fet fet
  </div>
</div>

要求列表的元素环绕红色块（左侧和底部）和黄色块（右侧和顶部）。你能告诉我如何达到预期的效果吗？

flexbox

1 个回答

  1. Best Answer

    对于应该在左侧的元素，设置类“.left”，对于右侧的元素 - “.right”。

    结果： https ://codepen.io/hisbvdis/pen/bGbrpRa

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

.container {
  width: 800px;
  font-size: 0;
}

.item {
  display: inline-block;
  width: calc(100% / 4);
  height: 200px;
  font-size: 2rem;
  text-align: center;
  color: #fff;
  background: #0000FF;
  border: 1px solid #FF0000;
}

.right {
  float: right;
  width: calc(100% / 2);
  background: #ff0000;
}

.left {
  float: left;
  width: calc(100% / 4 * 3);
  background: #67268b;
}
    <ul class="container">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item right">right</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="item">6</li>
  <li class="item">7</li>
  <li class="item">8</li>
  <li class="item">9</li>
  <li class="item">10</li>
  <li class="item">11</li>
  <li class="item left">left</li>
</ul>

    • 0

相关问题