首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使两个细胞在CSS高度上相互独立?

如何使两个细胞在CSS高度上相互独立?
EN

Stack Overflow用户
提问于 2020-06-26 14:55:39
回答 1查看 177关注 0票数 1

我正在试着把我的业务清单列出来。我想象16:9显示器上有两个细胞看起来像

我想用HTML中的一个表来完成这个任务:

代码语言:javascript
复制
<table style="width:100%">
  <tr>
    <th>service</th>
    <th>service</th>
  </tr>
  <tr>
    <td>text text text </td>
    <td>text</td>
  </tr>
  <tr>
    <th>service</th>
    <th>service</th>
  </tr>
  <tr>
    <td>text text text text</td>
    <td>text text</td>
  </tr>
</table>

这是可行的,但较长的文本在右侧停止在下一个服务标题的开始在左侧。我想让左细胞独立于右边。

我怎样才能解决这个问题?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-26 15:08:28

您可以从以下内容开始:

小提琴去玩。

代码语言:javascript
复制
.MainDiv {
  height: 800px;
  width: 100%;
  border: 1px solid red;
  display: flex;
  padding: 10px;
}

.leftDiv {
  height: 800px;
  width: 50%;
  border: 1px solid blue;
  margin: 10px;
}

.rightDiv {
  height: 800px;
  width: 50%;
  border: 1px solid blue;
  margin: 10px;
}
代码语言:javascript
复制
<div class="MainDiv">

  <div class="leftDiv">
    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left

    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
    left left left left left left left


    <h1>
      Service title
    </h1>
    left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
  </div>
  <div class="rightDiv">
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    Right right right right right right
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
    <h1>
      Service title
    </h1>
    Right right right right right right Right right right right right right Right right right right right right Right right right right right right Right right right right right right
  </div>
</div>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62597433

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档