Question

我有一个任务，但是我被设计困住了。我有五个盒子，四个盒子应该在角落，一个盒子在中间。设计图片在这里

我试图在HTML表格上工作，但没有工作。响应是重中之重。预先感谢。

这是我尝试过的代码。

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;border-style:solid;border-width:1px;overflow:hidden;word-break:normal}
.tg .tg-0lax{text-align:left;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}

.topleft{
  background-color: lightgrey;
  width: 150px;
  height:150px;
  border: 50px solid #fff;
  padding: 25px;
}
.topright{
  background-color: lightgrey;
  width: 150px;
  height:150px;
  border: 50px solid #fff;
  padding: 25px;
  display:inline-block;

}
.middle{
  background-color: #ed0e0e;
  width: 150px;
  height:150px;
  border: 50px solid #fff;
  padding: 25px;
   display:inline-block;
}
.bordertopleft{
    border-top: none;
    border-left: none;
  background: #ff00005c;
  }
  .bordertopright{
    border-top: none;
    border-right: none;
  background: #ff00005c;

  }
  .borderbottomleft{
  border-bottom: none;
    border-left: none;
  background: #ff00005c;
  }
  .borderbottomright{
   border-bottom: none;
    border-right: none;
  background: #ff00005c;

  }


.rightt{
text-align:right !important;

}
.middle_inline{
   text-align:center !important;
}
.lefttop1{
border-bottom:1px solid;
border-right:1px solid;

}
.righttop1{
border-bottom:1px solid;
border-left:1px solid;

}
.leftbottom1{
border-top:1px solid;
border-right:1px solid;

}
.rightbottom1{
border-top:1px solid;
border-left:1px solid;

}
.bo{
border:1px solid;
width: 1000px;
}
.boo{
border-top: 1px solid #000 !important;
}
.boo2{

}
.mid{
    width: 150px;
    height: 150px;
background-color:red;
}

<div class="bo" >
<table class="tg" style="width:1000px;height:400px;border: 0px solid #fff;">
  <tr>
    <th class="tg-0pky">
  <div class="lefttop1"><div class="topleft bordertopleft"></div></div>

  </th>
    <th class="tg-0pky "></th>
    <th class="tg-0pky rightt  "><div class="righttop1"><div class="topright bordertopright"></div></div></th>
  </tr>
  <tr>
    <td class="tg-0pky"></td>
    <td class="tg-0pky middle_inline boo"><div class="boo2"><div class="middle"><div class="mid"></div></div></div></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
        <td class="tg-0pky "><div class="leftbottom1">	<div class="topleft borderbottomleft"></div></div></td>
        <td class="tg-0pky"></td>
        <td class="tg-0pky rightt "><div class="rightbottom1"><div class="topright borderbottomright"></div></div></td>
      </tr>
    </table>
    </div>

在此代码中，无法显示中间框边框。

Answer 1

您可以看以下示例。块的尺寸在container中确定。

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 100px);
}

.corner {
  border: 1px solid black;
  position: relative;
}

.corner:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1;
}

.corner:nth-of-type(2) {
  grid-column: 5;
  grid-row: 1;
}

.corner:nth-of-type(2) .inset {
  right: 0; 
}

.corner:nth-of-type(3) {
  grid-column: 1;
  grid-row: 5;
}

.corner:nth-of-type(3) .inset { 
  bottom: 0;
}

.corner:nth-of-type(4) {
  grid-column: 5;
  grid-row: 5;
}

.corner:nth-of-type(4) .inset {
  bottom: 0;
  right: 0;
}

.corner .inset {
  background: pink;
  width: 75%;
  height: 75%;
  position: absolute;
}

.mid {
  grid-column: 3;
  grid-row: 3;
  background: darkred;
  padding: 12.5%;
}

.mid .inset {
  width: 100%;
  height: 100%;
  background: red;
}

<div class="container">
  <span class="corner"><div class="inset"></div></span>
  <span class="corner"><div class="inset"></div></span>
  <div class="mid"><div class="inset"></div></div>
  <span class="corner"><div class="inset"></div></span>
  <span class="corner"><div class="inset"></div></span>
</div>

Answer 2

我不确定这是否是您要寻找的东西，但是如果包装盒纯粹是美观的，则可以尝试这样的操作并稍微调整边框。我将弹性框和绝对定位结合使用。

HTML：

render()

CSS：

class Counter extends Component {
  state = {
    count: 0,
    tags: ["tag1", "tag2", "tag3"]
  };

  renderTags() {
    if (this.state.tags.length === 0) return <p>No tags!</p>;
    return (
      <ul>
        {this.state.tags.map(tag => (
          <li key={tag}>{tag}</li>
        ))}
      </ul>
    );
  }

  handleIncrement = product => {
    console.log(product);
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement(product)}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
        {(this.state.tags.length === 0 && "Please create new tag!") ||
          "tags exists"}
        {this.renderTags()}
      </div>
    );
  }

  private getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

五盒，四个在角落，一个在中心

2 个答案: