Question

我对页面布局有非常具体的要求，我似乎无法100％正确。

我的布局是这样的，我在每个部分添加了数字，以便更容易解释：

我目前的尝试： https://jsfiddle.net/metheria/sxxbqtnb/71/embedded/result/

我对它的尝试最初是在填充虚拟div之后创建宽高比，但这会在div下面留下很多空白空间。我需要这种布局不要超过目前正在发生的100％宽度和高度。

我目前的尝试使用了flex布局，但我还没有能够在其中加入5，因为我甚至看不到3,4和6中的文字。我知道这很可能是由于“填充底部：18％”，但没有填充，我甚至没有看到div，更不用说保持宽高比尝试...

无论如何都要纳入这些宽高比要求和完整布局吗？

另外，在（1）中，我想分为4个部分： - 一个图像 - 中间的空间分隔图像和两个按钮 - 两个按钮对齐左侧

这让我想到了最后的问题。我需要所有的div是“display：flex;”使这个布局工作或导航栏不能弯曲？并映射。

html代码：

<div id="navbar">navbar</div>
<div id="map">mapa</div>
<div id="infos">
    <div class="test">
        <div class="test-wrap">
            <div id="multimedia"></div>
            <div id="ambassador"></div>
            <div id="next"></div>
        </div>
    </div>
    <div id="footer"> text </div>
</div>

和css代码：

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

*, *:before, *:after {
  /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -webkit-box-sizing: border-box; 

  /* Firefox (desktop or Android) 28- */
  -moz-box-sizing: border-box;

  /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
  box-sizing: border-box;
}

#navbar {
    display: flex;
    background-color: pink;
    height: 54px;
    flex: 0 0 54px;
    width: 100%;
}

#map {
    width: 100%;
    height: 70%;
    background-color: blue;
}

#infos {
    height: 30%;
}

.test {
    position: relative;
    height: auto;
    background-color: transparent;
    display: flex;
}
.test-wrap {
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 0;
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
}
#next {
    position: relative;
    height: 100%;
    width: 15%;
    display: inline-flex;
    padding-bottom: 18%;
    background-color: #666;
}
#multimedia {
    position: relative;
    height: 100%;
    width: 25%;
    display: inline-flex;
    padding-bottom: 18%;
    background-color: #111;
}
#ambassador {
    position: relative;
    height: 100%;
    width: 60%;
    display: inline-flex;
    padding-bottom: 18%;
    background-color: #b92b2e;
}

#footer {
    display: inline-block;
    position: relative;
    height: 15px;
    flex: 0 0 15px;
    width: 100%;
    background-color: tomato;
}

Answer 1

由于整个过程是填充屏幕，我们可以使用视口单元来设置具有设定比率的元素。

然后我们可以在占用剩余空间的元素上使用flex:l。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  height: 100vh;
  background: #c0ffee;
}

header {
  height: 54px;
  background: yellow;
}

main {
  flex: 1;
  background: blue;
}

aside {
  height: 30vh;
  background: #000;
  display: flex;
}

.left.image {
  /* 1:1 */
  
  height: 30vh;
  width: 30vh;
  background: plum;
}

.left.video {
  /* 16:9 */
  
  height: 30vh;
  width: calc(30vh *16 / 9);
  background: red;
}

.mid {
  flex: 1;
  background: green;
  display: flex;
  align-items: flex-start;
}

.asidefooter {
  height: 25px;
  background: #bada55;
  align-self: flex-end;
  width: 100%;
}

.right {
  height: 30vh;
  width: 15vh;
  background: grey;
}

footer {
  height: 15px;
  background: pink;

}

＆＃13;

<header></header>
<main></main>
<aside>
  <div class="left video"></div>
  <div class="mid">  
    <div class="asidefooter"></div>
  </div>
  <div class="right"></div>
</aside><footer></footer>

＆＃13;

Codepen Demo

Flex Layout，宽高比，固定宽度和动态宽度列

1 个答案: