Question

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

内部左侧头部和内部右侧头部都为空。只有middleHeader包含一些链接。

在移动设备上观看时（320 - 420），我只希望中间头看到并占用所有可用空间 - 我在下面给出了这个代码吗？

正在发生的事情是middleHeader响应但是似乎只占用了行的三分之一，即使我有100％的宽度，我希望middleHeader占用其行中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不可见，但留下空白空间，其中隐藏的div应为

尝试改为：

display: none;

Answer 2

Visibility: hidden;不会阻止元素占用该元素的box-model内的空间。

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

@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调整为480px，您将看到隐藏的额外内容。

Answer 3

你能使用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 4

我刚从头开始使用HTML5和CSS创建了你理想要求的东西，另外我为此创建了一个Public Domain 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来创建一个div

4 个答案: