1

所以我有这个html

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

search-form 具有绝对定位并且向左浮动。我希望标签出现在它旁边，但在页面顶部。请注意，标签不一定总是在屏幕上（不需要固定）。

现在我有

.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%;
}
4

2 回答 2

0

This is an approach using % for your widths only. You could set max and min widths as well in %. 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>
于 2013-08-01T01:17:03.153 回答
0

也许这就是你要找的东西：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;
}
于 2013-07-31T23:05:43.063 回答