代码之家 › 专栏 › 技术社区 › acr_scout

CSS如何将div的一个放在主div旁边的顶部[已关闭]

css html

-2

acr_scout · 技术社区 · 8 年前

如何完成以下HTML table 使用 div 还有 css ?

<table border="1">
  <tbody>
    <tr>
      <td rowspan="2">Form Location</td>
      <td rowspan="1">Filter Location</td>
    </tr>
    <tr>
      <td rowspan="1">Data Location</td>
    </tr>
  </tbody>
</table>

3 回复 | 直到 8 年前

Nitin Dhomse 8 年前

可以将DOM结构表更改为div,如下所示:

<div style ="width : 300px;">

  <div style = "float : right">
   
    <div>Filter Location</div>
    <div>Data Location</div>
  </div>
  <div style = "float : left">
 <div>Form Location</div>
   
  </div>

</div>

Jeremy Thille 8 年前

带Flexbox的蛋糕。

div {
  padding: 2px;
  border: #00f solid 1px;
}
.main {
  display: inline-flex;
}
.main .left {
  display: flex;
  align-items: center;
}
.main .right {
  display: flex;
  flex-direction: column;
}

<div class="main">
  <div class="left"><span>Form location</span></div>
  <div class="right">
    <div class="up">Filter location</div>
    <div class="down">Data location</div>
  </div>
</div>

Pine Code 8 年前

#container {
  display: inline-block;
}

#table {
  display: flex;
  border: 1px solid black;
  padding: 5px;
}

#left {
  border: 1px solid black;
  margin: 0 5px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
}

#right {
  display: flex;
  flex-direction: column;
}

#right div {
  border: 1px solid black;
  padding: 5px;
}

#right div:first-child {
  margin: 0 0 5px 0;
}

推荐文章