0

我有一个期末项目需要采用响应式设计。我们还没有对这个主题进行太多介绍，也没有教给我们任何 javascript。我有点明白这个概念，但我在页面设计方面面临挑战。

徽标应位于主导航之后，但也应与搜索栏并排。但是无论是什么logo，多宽多高，搜索栏都应该始终在logo高度的中间，两者的宽度大约是63% logo和31% search bar + submitt btn。我不能使用表格，因为对于移动设备，搜索栏必须位于徽标下方。

如果问题是转储，我很抱歉，至少我确保之前没有被问过 B)

感谢您的时间！

页面布局

4

1 回答 1

1

有几种方法可以做到这一点，但首先可以使用垂直对齐。这是我一直发现的 CSS 中的 PITA。

垂直对齐：

您可以将主容器设置为display: table-cell;然后vertial-align: middle;在搜索 div 上使用。这在旧版本的 IE 中不受支持，但是当您响应时，无论如何您都会有一些障碍可以跳过它们。

.menuBar {
    display: table;
}

.logo, .search {
    display: table-cell;
    vertial-align: middle;
}

<div class="menuBar">
    <div class="logo">LOGO</div>
    <div class="search">SEARCH</div>
</div>

线高：

  #ex6     { height: 5em; line-height: 5em; }
  #ex6 *   { vertical-align: middle; }

  <div id='ex6'>
    <div class='lfloat'>lfloat</div>
    <div class='rfloat'>rfloat</div>
    <input type='checkbox'>
    <input type='text'>
    <span class='small'>small</span>
    <img src='avatar.gif'>
    normal
    <span class='large'>large</span>
  </div>

可以在此处找到行高示例和其他示例 - http://codeincomplete.com/posts/2011/3/20/css_vertical_align/

于 2012-07-17T09:55:50.040 回答