html - 等高 flex 行不起作用-6ren

html - 等高 flex 行不起作用

转载作者：太空宇宙更新时间：2023-11-04 12:30:38

24

4

我想在我的内容框中有两行假设这两行都应该平均分割视口(viewport)的高度(50:50)。我的要求是我希望他们拆分高度 (40:60)，但我是 flex boxes 的初学者，所以最初我尝试使用 50:50。

第一行将有一个 img 标签，它应该跨越整个宽度和高度。但是该图像也有最大宽度和高度。第二行将有 3 个列表项，左缩略图

这是代码笔:http://codepen.io/spanhawk/pen/Ggjwye

HTML代码

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Split view equally</title>

    <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>
  </head>

  <body>
    <ion-nav-bar animation="nav-title-slide-ios7" 
                 type="bar-positive" 
                 back-button-type="button-icon" 
                 back-button-icon="ion-arrow-left-c"></ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>
    <script id="home.html" type="text/ng-template">
      <ion-view title="Home">
        <ion-content scroll="false">
            <section class="home-container">
      <div class="row">
        <div class="col col-100">
             <img src="http://placehold.it/600x500">
        </div>
      </div>
      <div class="row">
        <div class="col col-100"
             <ion-list>
        <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
          <h1>Header 1</h1>
          </ion-item>
          <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
            <h1>Header 2</h1>
          </ion-item>
            <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
              <h1>Header 3</h1>
          </ion-item>
             </ion-list>
        </div>
      </div>
    </section>
        </ion-content>
      </ion-view>
    </script>
  </body>
</html>

尽管图像的高度和宽度是 600x500，但我希望它占据容器的整个宽度，高度应为 50 50，分为两行

谁能向我解释为什么它不起作用以及如何让它起作用？

我正在做教程中描述的所有事情

http://css-tricks.com/boxes-fill-height-dont-squish1

在过去的 6 个小时里，我一直在用头撞墙，试图找出它不起作用的原因。css 和 html 的一个缺点是，没有异常、错误等。作为链接主题回复

最佳答案

给你的容器一个确定的高度

.home-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

codepen

关于html - 等高 flex 行不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27685149/

24

4

0

文章推荐： c++ - 关于使用C++协程的问题

文章推荐： java - 如何使用java在xml文件中包含xsl样式表

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

html - 等高 flex 行不起作用