使用CSS灵活自定义布局（如果需要，可能是JS） [英] Flexible Custom Layout with CSS (possibly JS if needed)

问题描述

根据附图。我试图让一个包含多个项目的< ul> 。但是，我想要前五个项目总是填充视口高度，如果有超过五个项目，我需要其余的与前五个相同的高度< li>



根据图片中的第4号，可能有一个嵌套< ul> 可以填充具有多个< li> 的宽度。





$ c>< li> 需要垂直居中，并支持多行，同时保持与其他元素相同的高度。

注意：折叠下面的任何其他线条都需要具有与前五个相同的高度。 （即使起初少于五个元素，它们不应该填满整个高度，只有当它们有五个才能完成整页高度。

任何帮助非常感谢！
我上一个问题不完整，我错过了一些解释：垂直伸展列表项

感谢。

CODE二手：

  ul.navigation {
 list-style-type：none; 
 margin：0; 
 padding：0 ; 
 display：table; 
 width：100％; 
 height：100％; 
} 
 ul.navigation li {
 display：table-row ; 
} 
 ul.navigation li a {
 font-size：1.8em; 
 display：table-cell; 
 vertical-align：middle; 
 padding：1em 1.1em; 
 text-transform：uppercase; 
颜色：白色
 text-decoration：none; 
} 
  

解决方案

至于高度，一种方法会使用 VH 关键字，这是视口的高度的1％。它只在IE9中有效，但因为我猜这是一个移动屏幕截图，你应该确定。

您也应该考虑使用Flexbox的，这在移动浏览器工作正常，它可以让你做垂直居中无显示所有的混乱：表。

  ul {
 display：flex; 
 flex-direction：column; 
 margin：0; 
 padding：0; 
 height：100vh; 
 border：1px solid red; 
 width：24em; 
} 
 li {
 display：flex; 
 flex-direction：row; 
 justify-content：space-around; 
 align-items：center; 
} 
 li> div {
 flex-grow：1; 
 flex-shrink：1; 
 max-width：50％; 
 display：flex; 
 flex-direction：column; 
 justify-content：center; 
 align-items：center; 
} 
 li：nth-​​child（even）{
 background：gray; 
} 
 ul> li {
 height：20vh; 
} 
  

下面是一个dabblet：
的 http://result.dabblet.com/gist/78afacb7e747b7e24e62/ba0f81dc9278ec743c58027e995a0f6c381329b8

http://dabblet.com/gist/78afacb7e747b7e24e62

As per the attached image. I am trying to make a <ul> that contains multiple items. However, I want the first five items to always fill the viewport height and if there are more than five items I need the rest to have the same height as the first five <li>'s.

As per li number 4 in the image, there maybe be a nested <ul> that can fill the width having multiple <li>'s.

The text inside all <li>s needs to be vertically centered and supports multi-line while retaining the same height as the other elements.

NOTE: Any other lis below the fold need to have the same height as the initial first five. (Even if there are less than five elements at first, they shouldn't fill the full height. Only when there are five they complete the full page height.

Any help is greatly appreciated! My previous question was not full and I missed some explanations: Vertically Stretch List Items I am using the CSS only solution (for now) which doesn't work as needed.

Thanks.

CODE Used:

ul.navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
}
ul.navigation li {
    display: table-row;
}
ul.navigation li a {
    font-size:1.8em;
    display: table-cell;
    vertical-align: middle;
    padding: 1em 1.1em;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
}

解决方案

Regarding the heights, one approach would be to use the vh keyword, which is 1% of the height of the viewport. It's only valid in IE9 up, but as I'm guessing this is a mobile screenshot, you should be ok.

You should also consider using flexbox, which works fine in mobile browsers, and it allows you to do vertical centering without all the messiness of display:table.

ul{
    display:flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    height: 100vh;
    border: 1px solid red;
    width:24em;
}
li{
    display:flex;
    flex-direction: row;
    justify-content:space-around;
    align-items:center;
}
li > div {
    flex-grow:1;
    flex-shrink:1;
    max-width: 50%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
li:nth-child(even){
    background: gray;
}
ul > li {
    height: 20vh;
}

Here's a dabblet: http://result.dabblet.com/gist/78afacb7e747b7e24e62/ba0f81dc9278ec743c58027e995a0f6c381329b8

http://dabblet.com/gist/78afacb7e747b7e24e62

这篇关于使用CSS灵活自定义布局（如果需要，可能是JS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！