Question

所以我有这个HTML

<div class="app-wrapper">
  <div class="search-form"/>
  <div class="results">
     <div class="tabs"/>
  </div>
</div>

搜索表单具有绝对定位并向左浮动。我希望标签显示在它旁边，但在页面顶部。请注意，不一定是标签总是在屏幕上（不需要修复）。

现在我有

.search-form {
  position: absolute;
  width: 30%;
  min-width: 200px;
  max-width: 350px;
  height: 100%;
  min-height: 600px;
  float: left;
}

.tabs {
  position: fixed;
  border-bottom: 1px solid @section-border;
  width: 70%;
  height: 3.0em;
  float: right;
  left: 31%;
  background: @tabs-background;
}

但这不起作用，因为在较大的屏幕上，标签和搜索表单之间的距离会扩大。

我如何获取它，以便标签位于搜索表单旁边，填满页面的其余部分，标签和搜索表单之间的距离不依赖于屏幕大小？

所以我只是意识到制表符在另一个div中，带有CSS

.results {
  width: 70%;
}

Answer 1

也许这就是你要找的东西：http://jsbin.com/ofagoq/11/edit

CSS：

.search-form {
  background-color: red;
  width: 30%;
  min-width: 200px;
  max-width: 350px;
  height: 100%;
  min-height: 600px;
  float: left;
}

.tabs {
  background-color: green;
  width: 70%;
  height: 3.0em;
}

Answer 2

这是一种仅使用％宽度的方法。您也可以设置最大和最小宽度％。 http://jsbin.com/upucob/1/

.app-wrapper {
    width:90%;
    float:left;
    margin:1em 3%;
    padding: 1em 2%;
    background: #CCC;
}

.search-form {
    width: 30%;
    min-height: 600px;
    float: left;
    background:#999;
}

.tabs {
    width: 70%;
    height: 3.0em;
    float: left;
    border-bottom: 1px solid #000;
    background:#888;
}



<div class="app-wrapper">

    <p>This is the outter container</p>

    <div class="search-form">

        <h3>Form goes here</h3>

    </div>

    <div class="tabs">

    <h3>Tabs</h3>

    </div>

    <div class="results">

    <h3>The Results</h3>

    </div>

</div>

两个div并排，一个div绝对

2 个答案: