响应式设计，每页角落都有div

时间：2016-12-12 14:12:21

标签： html css

我正在开发一个响应式设计，我在顶部有一个ID div，在页面的其余部分，我应该在页面的每个角落都有div按钮（即，我应该有2x2 divs，每行并排两个div，第一行对齐页面顶部，第二行对齐页面底部） - 在横向视图中。 （在Placing 4 html elements in every corner of a div中讨论了类似的东西，但是我无法在这里找到如何将该解决方案应用于我的示例）。

在纵向视图中，按钮＆＃39; width应该大约是视口宽度的大小，并且它们应该在彼此之下。我提出了以下例子：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <script type="text/javascript">
  </script>
  <style type="text/css">
html, body {
  margin: 0;
  padding: 0;
}
.testbtnholder {
  border: 2px solid gray;
  width: calc(100% - 1em);
  height: calc(100% - 2em);
  position: relative;
  margin-top: 0px;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
}
.testbtn {
  border: 2px solid #FF9999;
  width: calc(50% - 1em);
  height: 5em;
  /* line-height: 5em; // does vertical align to middle, but only for single-line text; http://phrogz.net/css/vertical-align */
  position: absolute;
  text-align: center;
  /* top: 50%; margin-top: -2.5em; // should do vertical align to middle, but it doesn't */
}
@media all and (orientation:landscape) {
  .testbtn:nth-child(even) {
    right: 0;
  }
  /*nth-last-child(-n+2) - select 2 last items from the parent*/
  .testbtn:nth-last-child(-n+2) {
    bottom: 0;
  }
}
@media all and (orientation:portrait) {
  .testbtn {
    position: relative;
    width: calc(100%);
  }
}
#dreport {
  font-size: 0.76em;
}
  </style>
</head>

<body>
  <div id="dreport">Test text</div>
  <div class="testbtnholder">
    <div class="testbtn">Test <br/> one</div>
    <div class="testbtn">Test two</div>
    <div class="testbtn">Test three</div>
    <div class="testbtn">Test <br/> four</div>
  </div>
</body>
</html>

这个示例在横向上有点适用于Chromium 48，但在Firefox 50中失败（下图，左图是Chromium，右图是Firefox）：

chromium-ff-problem

（事实上，如果我在HTML的开头添加<!DOCTYPE html>，Chromium也会生成与FF相同的错误布局！）

我的问题/疑问是：

  • 即使我将html和body的边距/填充重置为0，然后为margin-left明确设置margin-right和.testbtnholder在FF和Chromium中，我得到了某种左边距，并推动了＃34;其余的布局，所以滚动条出现。如何明确设置边距，因此我不必依赖overflow:hidden;来隐藏滚动条（因此.testbtnholder的边框会在页面中水平居中显示）？
  • 我希望div按钮中的文字水平和垂直居中;我已经使用text-align: center实现了水平居中，但无法实现垂直居中（使用vertical-align: middle）
  • 如何让Firefox渲染与Chromium相同的图像（Positioning problems in Firefox? position:relative for a display:table element中可能描述了FF渲染问题）
  • 是否有比我在这里采用的更好的布局方法？例如，根据方向切换absolute到relative的位置对我来说似乎有些黑客攻击，那么使用弹性框布局会更好吗？我已经查看了https://css-tricks.com/snippets/css/a-guide-to-flexbox/，但此刻对我来说有点太多了 - 所以如果这里的flexbox更适用，我怎么能重写这个例子的HTML / CSS才能使用Flexbox的？

否则，在纵向模式下，布局通常有效（除了边距问题）：

ff-chrome-portrait

3 个答案:

答案 0 :(得分：2)

  • 您应该始终添加 library(ggplot2) library(dplyr) library(tidyr) # Some fake data by_state<- data.frame( state=c("Florida","New York","Nebraska","Nevada","Texas"), healthy=c(19,16,15,20,22), danger=c(2,4,6,2,1), warning=c(4,5,8,3,3), stringsAsFactors = FALSE ) by_state%>%gather(Condition,value,-state)%>% ggplot(aes(x=state,y=value,fill=Condition))+ geom_bar(stat = "identity", position = "dodge")+ scale_colour_manual(values = c("red","blue", "orange")) 。这不应该是一个例外

我不太明白为什么你这样做，但是从使用你提供的代码并进行以下更改：

<!DOCTYPE html>

（横向）

这完全解决了我的布局问题。

此外，您有一个次要问题，宽度与窗口大小略有偏差，我认为您需要调整宽度.testbtnholder { /* position: relative; */ } 。

的问题：

  

即使我正在为html和body重置margin / padding为0，然后为.testbtnholder明确设置margin-left和margin-right，在FF和Chromium中我得到某种左边距“推” “布局的其余部分，所以滚动条出现。如何明确设置边距，所以我不必依赖overflow：hidden;隐藏滚动条（因此.testbtnholder的边框在页面中水平居中显示）？

使用calc自动居中设置宽度容器。如：

margin:auto
  

我希望div按钮中的文本水平和垂直居中;我已经使用text-align：center实现了水平居中，但无法实现垂直居中（使用vertical-align：middle）

这与Flex Box相当直接。

  

如何让Firefox呈现与Chromium相同的图像

一旦设置了一致的CSS结构，Firefox和Chromium就非常一致。 Safari和IE可能会导致更多的不一致问题。

  

是否有比我在这里采用的更好的布局方法？

是的，请尝试使用Flex Box。

编辑：我看到你已经引用了阅读Flex Box，说实话，链接到CSS技巧Flexbox页面是一个非常好的起点，因为它贯穿于每个方面flexbox的逐点。坚持下去，你会变得更聪明，更强大：）

答案 1 :(得分：1)

我在这里尝试使用 Flexbox ，请查看下面的代码段：

html, body {
  margin: 0;
  padding: 0;
}
.testbtnholder {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid gray;
  height: calc(100vh - 2em);
  position: relative;
  margin-top: 0px;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
}
.row {
  display: flex;
}
.row .testbtn:last-child {
  margin-left: auto;
}
/* .row:last-child .testbtn {
  align-self: flex-end;
} */
.testbtn {
  border: 2px solid #FF9999;
  padding: 10px;
  width: 40%;
  height: 5em;
  height: auto;
}
@media all and (orientation:landscape) {
  .testbtn:nth-child(even) {
    right: 0;
  }
  /*nth-last-child(-n+2) - select 2 last items from the parent*/
  .testbtn:nth-last-child(-n+2) {
    bottom: 0;
  }
}
@media all and (orientation:portrait) {
  .row {
    flex-direction: column;
  }
  .row .testbtn:last-child {
    margin-left: 0;
  }
  .row:last-child .testbtn {
    align-self: stretch;
  }
  .testbtn {
    position: relative;
    flex: 1;
    align-self: stretch;
    width: auto;
  }
}
#dreport {
  font-size: 0.76em;
}
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <script type="text/javascript">
  </script>
</head>

<body>
  <div id="dreport">Test text</div>
  <div class="testbtnholder">
    <div class="row">
      <div class="testbtn">Test <br/> one</div>
      <div class="testbtn">Test two</div>
    </div>
    <div class="row">
      <div class="testbtn">Test three</div>
      <div class="testbtn">Test <br/> four</div>
    </div>
  </div>
</body>
</html>

希望这是你想要实现的目标。

答案 2 :(得分：1)

就个人而言，我会使用绝对位置进行横向模式并切换到纵向模式的flexbox列布局......对我来说似乎更合适。

示例：

* {
      /*
      to avaid srollbars when using borders set box-sizing
      here it is set to every element
      */
      box-sizing: border-box;
    }

    html, body {
      margin: 0px;
      padding: 0px;
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
    }
    #header-contaier {

      height: 2em;


    }
    #button-container {
      position: relative;
      flex: 1 0 auto;
      margin-top: 0.5em;

    }

    .div-button {
      /*the width in landscape mode - default here*/
      width: calc(50% - 1em);
      height: 5em;
      text-align: center;
      vertical-align: middle;
      line-height: 5em;
      margin: 0;
      background: rgba(0, 75, 153, 0.8);
    }
    @media all and (orientation:landscape) {

      #button-1 {
        position: absolute;
        top: 0px;
        left: 0px;
      }
      #button-2 {
        position: absolute;
        top: 0px;
        right: 0px;
      }
      #button-3 {
        position: absolute;
        bottom: 0px;
        left: 0px;
      }
      #button-4 {
        position: absolute;
        bottom: 0px;
        right: 0px;
      }
    }
    @media all and (orientation:portrait) {
      /*switch to flexbox column layout*/
      #button-container {
        display: flex;
        flex-direction: column;

      }
      .div-button {
        /*set width to 100% and give it some margin-bottom*/
        flex: 0 0 5em;
        width: 100%;
        margin-bottom: 0.5em;
      }
    }
<div id="header-container">Header container</div>
  <div id="button-container">
    <div id="button-1" class="div-button">Button 1</div>
    <div id="button-2" class="div-button">Button 2</div>
    <div id="button-3" class="div-button">Button 3</div>
    <div id="button-4" class="div-button">Button 4</div>
  </div>

这种布局有更多的可能性 - 它只是一个例子。 （在SO上的整页中运行片段以查看横向和纵向之间的切换）

你有滚动条，因为在使用边框时你应该使用box-sizing: border-box;来计算边框宽度的大小。

要使vertical-align工作，您必须设置相应的行高。 （参见本例中的css）

其他可以使文字居中的技巧： 例如this question on SO

相关问题
最新问题