3 列 HTML 布局

Question

有很多与 3 列设计相关的问题、答案和教程，但其中 none 帮助解决了我的特定问题。

我有两个围绕 select 控件的文本输入，我需要将其显示在一行中。问题源于我使用 jQuery 库来设置控件的样式。两个文本输入都旨在填充其父容器，但中心 select 的宽度特定于其内容。

处理此布局的正常方法是使用边距和浮动，所有这些都需要事先了解中心列的宽度。

This fiddle 是我能找到的最接近的解决方案，但它仍然需要硬编码值。 .content:width 在页面加载时由 javascript 设置。在这里我给了它一个随机值。 .left, .right 宽度有一个我想删除的硬编码值。

<div class="wrapper">
    <div class='left'></div>
    <div class='right'></div>
    <div class='center'><div class='content'></div></div>
</div>

.center {
    text-align: center;
}
.content {
    /* The width and display come from javascript. */
    display: inline-block;
    width: 64px;
    height: 50px;
    border: 2px dashed #00f;
}
.left, .right {
    float: left;
    width: calc(50% - 40px);
    height: 50px;
    border: 2px dashed #f0f;
}
.right {
    float: right;
}

我知道这可以使用 javascript 轻松完成，但我更希望 CSS 只回答。

Answer 1

你在找这样的东西吗？

HTML

<div class="wrapper">
    <div class='left'></div>
    <div class='center'><div class='content'></div></div>
    <div class='right'></div>
</div>

CSS

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.center {
    text-align: center;
}
.content {
    /* The width and display come from javascript. */
    display: inline-block;
    width: 64px;
    height: 50px;
    border: 2px dashed #00f;
}
.left, .right {
    flex-grow: 1;
    height: 50px;
    border: 2px dashed #f0f;
}
.right {
    float: right;
}

中心有固定宽度，边元素填充space。

jsFiddle

如果不是，你能详细说明一下吗？

Answer 2

我推荐你使用 bootstrap css : 你有一个优秀的网格系统，可以让你做任何你想做的事 getbootstrap.

3 列 HTML 布局

A 3 column HTML layout

html

css

layout