如何使用HTML，CSS和Flex制作垂直时间表

时间：2019-01-25 19:08:16

标签： html css flexbox timeline

我正在使用HTML和CSS制作垂直时间表。我的想法是为每个步骤使用CSS边框。我将“ border-right”用于下一步，将“ border-left”用于下一步。从理论上讲，这是否会使线条完美地位于中间？但是，该行在中间是 not 。这条线看起来断了。这是我需要帮助的地方。您能否看一下我的CSS / HTML并完美地使中间线居中？我想将此模板作为模板，因此可以根据需要永久复制和粘贴每个步骤。

对于所有步骤，我都需要帮助以使中心黑线与中心对齐。我在做什么错了？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
    th {
      position: sticky;
      top: 0;
      background: white;
    }
  </style>
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@3.4.0/dist/css/bootstrap.css">
  <title></title>
</head>
<body>
<div>
  <table class="table">
    <thead>
    <tr>
      <th></th>
      <th class="last-name"><a href="#">Last</a></th>
      <th class="first-name"><a href="#">First</a></th>
      <th class="gender"><a href="#">Gender</a></th>
      <th class="home"><a href="#">Home</a></th>
      <th class="cell"><a href="#">Cell</a></th>
      <th class="email"><a href="#">Email</a></th>
      <th class="address"><a href="#">Address</a></th>
      <th class="area"><a href="#">Area</a></th>
      <th class="city"><a href="#">City</a></th>
      <th class="state"><a href="#">State</a></th>
      <th class="zip"><a href="#">Zip</a></th>
      <th class="modified"><a href="#">Modified</a></th>
      <th class="created"><a href="#">Created</a></th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    <tr><td>9999</td><td>Smith</td><td>John</td><td>M</td><td>888-555-1212</td><td>800-555-1212</td><td>john@example.com</td><td>123 Main St.</td><td>Main</td><td>New York</td><td>NY</td><td>99999</td><td>1/1/01, 12:00 AM</td><td>1/1/01, 12:00 AM</td><td><a href="#" class="view">View</a></td></tr>
    </tbody>
  </table>
</div>
Test
</body>
</html>
.step {
  display: flex;
}

.img-left,
.img-right {
  padding: 30px;
}

.info-right,
.info-left {
  padding: 30px;
}

.info-right {
  border-left: 1px black solid;
}

.info-left {
  border-right: 1px black solid;
}

在CodePen上查看。

2 个答案:

答案 0 :(得分：2)

弹性物品会增长或收缩，以适应其弹性容器中的可用空间。您必须使用 flex CSS property 控制该行为。  同时给您的图像一个max-width。 

.step {
    display: flex;
}

.step img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.step h2 {
  margin-top: 0;
}

.step__left, .step__right {
    padding:30px;
    flex: 0 0 200px;
}

.step__right {
    border-left:1px black solid;
    background-color: rgba(0,255,0,0.1);
}

.step__left {
    border-right:1px black solid;
    background-color: rgba(255,0,0,0.1);
}
<div class="timeline-holder">
    <h1>Timeline</h1>
        <div class="step">
            <div class="step__left">
                <img src="https://via.placeholder.com/150"/>
            </div>
            <div class="step__right">
                <h2>Placeholder Title</h2>
                <p>Placeholder text. Placeholder text. Placeholder text. Placeholder text. Placeholder text.</p>
                <ul>
                    <li>Placeholder text</li>
                    <li>Placeholder text</li>
                </ul>
            </div>
        </div>
        <div class="step">
            <div class="step__left">
                <h2>Placeholder Title</h2>
                <p>Placeholder text. Placeholder text. Placeholder text. Placeholder text. Placeholder text.</p>
                <ul>
                    <li>Placeholder text</li>
                    <li>Placeholder text</li>
                </ul>
            </div>
            <div class="step__right">
                <img src="https://via.placeholder.com/150"/>
            </div>
        </div>
</div>

答案 1 :(得分：0)

.img-left, .img-right {
    padding:30px;
    flex:1;
}
.info-right,.info-left {
    padding:30px;
    flex:1;
}

+添加“ flex：1;”使它们相等的宽度。

相关问题
最新问题