Question

我刚刚开始关注html / css并且遇到一些问题让我了解布局引擎的工作原理。

我来自c＃背景，任何有硬编码宽度/高度的东西都觉得有些不对劲。我发现的第一件事就是你不能让div扩展以合理的方式填充它们的可用高度，所以我一直在使用表格。

我想要的UI基本上是一个网格，它是带有侧面板的页面的主要部分。我们的想法是使用箭头键导航网格，然后使用侧面板选择单元格的选项 - 它是一个相当简单的主/细节。

我很高兴使用表来分隔两列，但我遇到的问题是在侧面板中：

我想在顶部有一个搜索框。当您在搜索框中输入内容时，它会“自动填充”以显示与您刚输入的内容相关的选项。

我遇到的第一个问题是搜索框不在网格中单元格的顶部。所以我正在使用：

position: absolute;
top: 0;

为<input>设置了position:relative。

然后我在单元格内使用另一个div来布局结果。这工作正常，但搜索框模糊了第一项。

然后我尝试更改搜索框以使display: block解决问题，但意味着当没有搜索结果时搜索框不是顶部对齐的！

似乎使用display和position属性是相互排斥的，那么我如何以合理的方式实现这一目标呢？

一个选项似乎是只使用表格，这有什么不对吗？

#mainLayout
{
    width: 100%
}

#turnSelectionPanel
{
    /*visibility: hidden;*/
    width: 30%;
    height: 100%;
    background-color: saddlebrown;
    /*this is to allow positioning within this element using 'absolute'*/
    position: relative;
}

#turnSearchBox
{
    min-height: 20px;
    max-width: 200px;
    min-width: 100px;
    display: block;
    /*or
    position: absolute;
    top: 0;
    */
}

    <body>

    <table id="mainLayout">
        <tr>
            <td>
                <table id="roster"></table>
            </td>
            <td id="turnSelectionPanel">
                <input type="text" id="turnSearchBox"/>
                <div id="turnArea">

                </div>
            </td>
        </tr>
    </table>

    </body>

为了简洁起见，我省略了其他一些css +其中显示的一些东西基本上是不相关的 - 宽度等。

表格+侧面板是从javascript填充的

Answer 1

这是您可以使用的基本结构。

<body>
  <!-- This is a wrapper that controls the total height and width of page elements -->
  <div id="mainLayout"> 

    <!-- You can position the elements however you would like. -->
    <div id="leftColumn"> ...Code goes here... </div>
    <div id="searchBar"> ...Code goes here... </div>
    <div id="rightColumn"> ...Code goes here... </div>
  </div>
</body>

我特别喜欢用float:left;来安排我的元素。类似的东西：

#mainLayout {
    width:100%
    height:100%;
}
#leftColumn {
    width:75%;
    height: 100%;
    float:left;
}
#searchBar{
    width:25%;
    height: 10%;
    float:left;
}
#rightColumn {
    width:25%;
    height: 90%;
    float:left;
}

这将创建一个与窗口一起缩放的布局，并为您提供左列和右列，其上方有一个搜索栏。显然，如果你知道你想要你的元素的大小，你可以简单地设置它们。

Answer 2

我不是粉丝（根本就是真的）使用花车，所以这是我对你布局的方法：

我不确定你是否想要一个左列，但我已经为你的选择添加了一个：

＆＃13;

.left, .nav,.right, .content {
  display: inline-block;
  position: absolute;
  position: absolute;
}
html,
body {
  margin: 0;
  padding: 0;
}
.nav {
  width: 75%;
  background: lightgray;
  height: 100px;
  top: 0;
  left: 0;
}
.left {
  width: 20%;
  top: 100px;
  left: 0;
  background: darkgray;
  height: calc(100% - 100px);
}
.right {
  width: 25%;
  top: 0;
  right: 0;
  background: gray;
  height: 100%;
}
.content {
  width: 55%;
  height: calc(100% - 100px);
  background: lightblue;
  top: 100px;
  left: 20%;
}
#search {
  position: relative;
  width: 90%;

  margin: 2%;
}

＆＃13;

<div class="nav">I'll go most of the way along the top</div>
<div class="left">I'll be a column on the left</div>
<div class="right">
  <input id="search" type="text" placeholder="Search Me" />
  <br/>
  <div class="furtherContent">
    I'll be a column on the right</div>
</div>
<div class="content">I'll be a content</div>

＆＃13;

顶部与Css对齐

2 个答案: