时间戳

首页 > 解决方案 > 有两列与边框并排

html - 有两列与边框并排

问题描述

我想要两列并排，并在它们上面有一个边框。我面临的问题是，一旦我添加了边框，列就会堆叠在一起。

创建两个相等的并排但有边框的列的适当语法是什么？

这是我正在使用的 HTML 和 CSS：

h1 {
  text-align: center;
}

.tab {
  padding-right: 90px;
}

.column {
  float: left;
  width: 50%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
    <div style="border:3px; border-style:solid; border-color:black; padding: 1em;">
    <h1>Evil T1000</h1>
    <div style="height: 60px;"></div>
    <h1><span class="tab">Current Span of Data:</span>YTD</h1>
    </div>
    <div class="row">
        <div class="column" style="border:2px; border-style:solid; border-color:black; padding:1em; border-top:0;">Column1</div>
        <div class="column" style="border:2px; border-style:solid; border-color:black; padding:1em; border-top:0; border-left: 0;">Column 2</div>
    </div>
</body>
</html>

标签： htmlcss

解决方案

cssgrid是一个非常强大的功能，你可以用 css 创建类似表的结构。

Css 网格文章

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
    <div style="border:3px; border-style:solid; border-color:black; padding: 1em;">
    <h1>Evil T1000</h1>
    <div style="height: 60px;"></div>
    <h1><span class="tab">Current Span of Data:</span>YTD</h1>
    </div>
    <div class="row">
        <div class="column" style="border:2px; border-style:solid; border-color:black; padding:1em; border-top:0;">Column1</div>
        <div class="column" style="border:2px; border-style:solid; border-color:black; padding:1em; border-top:0; border-left: 0;">Column 2</div>
    </div>
</body>
</html>

推荐阅读