使 div 具有三个内部浮动 divs 以响应移动设备

Question

我有一个外部 header div，其中包含三个浮动的 div。

inner leftHeader和inner rightHeader都是empty。只有 middleHeader 包含一些链接。

在移动设备 (320 - 420) 上查看时，我只希望 middleHeader 可见并占用所有可用空间 space - 我有下面给出的代码吗？

发生的事情是 middleHeader 是响应式的，但似乎只占了行的三分之一，即使我的宽度为 100%，我希望 middleHeader 占据其行中 space 的全部 100% .任何帮助都会很棒。也许有更好的方法来做到这一点？

HTML

<div class="header">
    <div class="leftHeader">Empty</div>

    <div class="middleHeader"><nav>
                <ul>
                    <li><a href="page1.html" title="">Link to page 1</a></li>
                    <li><a href="page2.html" title="">Link to page 2</a></li>
                    <li><a href="page3.html" title="">Link to page 3</a></li>
                </ul>
                </nav></div>

    <div class="rightHeader">Empty</div>
</div>

手机版CSS

@media only screen and (min-width: 320px) and (max-width: 420px) and (orientation : portrait){

    div.leftHeader{visibility:hidden;}

    div.middleHeader{width: 100%; float: none; text-align:left;}

    div.rightHeader{visibility:hidden;}

}

Answer 1

visibility:hidden;

仅使 div 不可见，但留空 space 隐藏 div 应该是

试试看：

display: none;

Answer 2

可以使用Bootstrap吗？

<div class="header row">

  <div class="leftHeader hidden-xs col-sm-3">Empty</div>

  <div class="middleHeader col-xs-12 col-sm-6"><nav>

  <div class="rightHeader hidden-xs col-sm-3">Empty</div>

</div>

hidden-xs class 隐藏 div 和 col-xs-12 将强制 middleHeader 为 100% 宽度。

Answer 3

Visibility: hidden; 不会阻止元素在该元素的框模型中占据 space。

您需要使用 display:none; - 这会隐藏内容并且不允许元素占用任何浏览器 space。

@media only screen and (min-width: 320px) and (max-width: 420px) and (orientation: portrait) {
  .middleHeader {
    width: 100%;
    float: none;
    text-align: left;
    background: red;
    /* for demo purpose */
  }
  .hidden-xs {
    display: none;
    visibility: hidden;
  }
}

<div class="header">
  <div class="leftHeader hidden-xs">Empty</div>

  <div class="middleHeader">
    <nav>
      <ul>
        <li><a href="page1.html" title="">Link to page 1</a>
        </li>
        <li><a href="page2.html" title="">Link to page 2</a>
        </li>
        <li><a href="page3.html" title="">Link to page 3</a>
        </li>
      </ul>
    </nav>
  </div>

  <div class="rightHeader hidden-xs">Empty</div>
</div>

尝试查看代码片段示例并将浏览器的大小从 320 像素调整为 480 像素，您会看到隐藏的额外内容。

Answer 4

我刚刚使用 HTML5 和 CSS 完全从头开始创建了您理想中的要求，另外我还为此创建了一个 Public 域 GitHub 目录，您可以在 https://github.com/danielrutter/Header-Script---1-Row-3-Columns

处自由使用代码

这是从 2016 年 8 月 18 日第一次提交到 GitHub 开发的代码：

index.html 或 index.php（取决于您的偏好 [当前设置为 .html]）：

<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<title>Header Script - 1 Row, 3 Columns</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>

<div id="container">

<header>
<header-left>LEFT</header-left>
<header-center>OBJECT PLACEMENT</header-center>
<header-right>RIGHT</header-right>
</header>

</div>

</body>
</html>

css/styles.css:

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  color: black;
}

#container {
  margin: auto;
  width: 100%;
}

header {
  max-width: 100%;
  height: 110px;
  border: 1px solid black;
}

header-left {
  width: 18%;
  height: 100%;
  float: left;
  display: block;
  border-right: 1px solid black;
}

header-center {
  width: 64%;
  height: 100%;
  display: inline;
}

header-right {
  width: 18%;
  height: 100%;
  float: right;
  display: block;
  border-left: 1px solid black;
}

使 div 具有三个内部浮动 divs 以响应移动设备

Make a div with three inner floated divs responsive for mobile

html

css