Question

我正在创建一个HTML网页，页面上有三列。一个侧边栏，一个主页面和左侧的一个侧边栏。

http://postimg.org/image/5sd87ktbf/00734539/

最后，我希望它看起来像上面的链接。

我的代码现在看起来像这样：

<table>
    <tr>
        <td><a href="    ">Hotels</a></td>
        <td rowspan=3>" text "></td>
        <td><a href="     ">Movieland >/a</td>
    <tr>
<table>

我感觉有点偏离轨道，所以任何帮助都会非常感激。

Answer 1

用CSS给它一个宽度。

＆＃13;

table {
  width: 100%;
  height: 200px;
}
td {
  vertical-align: top;
}
.content {
  background-color: lightgray;
}
.sidebar {
  width: 100px;
}

＆＃13;

<table>
  <tr>
    <td class="sidebar">Sidebar</td>
    <td class="content">Content</td>
    <td class="sidebar">Sidebar</td>
  </tr>
</table>

＆＃13;

Answer 2

您可以使用名为flexbox的CSS的新属性来定位它们对齐

式

<style>
.container{
    display: flex;
}
</style>

HTML

<div class="container">
<aside>
    <h3>Sidebar</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus laudantium sint, id, rerum eaque cum, repellat quis ut aliquam maxime odio expedita illo aperiam ex, quasi accusamus enim voluptatum obcaecati.
    </p>

</aside>

<main>
    <h3>Main content</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt error, officia fugit autem accusamus voluptas cupiditate facere labore maxime, eveniet sequi placeat iure fugiat! Ea omnis porro sunt dicta similique.
    </p>
</main>

<aside>
    <h3>Next sidebar</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi expedita, officiis perferendis voluptas ut accusantium placeat atque quos impedit sapiente minus officia molestias reiciendis doloremque veritatis quod. Soluta, temporibus dolor.
    </p>
</aside>

</div>

您可以阅读有关flexbox here

的更多信息

如何在HTML中显示三个不同大小的列

2 个答案: