html - 显示 : Flex not producing content under it-6ren

html - 显示 : Flex not producing content under it

转载作者：行者123 更新时间：2023-11-28 10:24:55

26

4

为什么第二列中的段落是在标题的右侧而不是下方生成的？我使用 display: flex 将内容居中对齐，但我希望列中的新元素堆叠在前一个元素的下面。

main{
    background: linear-gradient(to right, #4b53ff, #9e63ff);
    width: 100vw;
    height: 100vh;
    background-size: cover;
}
main .row{
    width: 65vw;
    height: 60vh;
    display: flex;
    text-align: center;
    align-items: center;
}
.col1{
    background-color: white;
    height: 100%;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    
}
.col2{
    background: linear-gradient(to right, #7633e5, #178ee0);
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    height: 100%;
    width:  100%;
}
p{
  font-size:11px;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <main class="d-flex align-items-center ">
        <div class="container d-flex justify-content-center">
            <div class="row ">
                <div class="col-lg-4  col-md-4 col-sm-4 col1  d-flex align-items-center justify-content-center">
                    <h2 class="block">login</h2>

                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col2 d-flex align-items-center ">
                    <h2 class="d-block justify-content-center">Random heading</h2>
                    <p class="d-block justify-content-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        nisi ut aliquip ex ea commodo consequat. </p>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

最佳答案

将 flex-direction: column; 样式添加到 col2 类。

默认的 flex-direction 值是 row，这就是为什么它将它们放在 col2 中的一行中。 col1 只有一个元素，因此您看不到它也是一行。

关于html - 显示 : Flex not producing content under it，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55176360/

26

4

0

文章推荐： html - 是否可以使用 href 链接显示无？

文章推荐： css - calc(--x - y) 是有效的 CSS 语法吗？

文章推荐： html - 从 css 添加图像

文章推荐： javascript - 如何从外部 JSON feed 创建 JSONP？

java - Producer/Consumer : One Producer, 多个消费者，每个都处理相同的数据
我有一个生产者/消费者场景，我不希望一个生产者交付产品，也不希望多个消费者消费这些产品。然而，常见的情况是交付的产品仅由一个消费者消费，而其他消费者永远看不到该特定产品。我不想完成的是每个消费者消费一
java - 生产者/消费者 : no producer/consumer should block other producer/consumer
我正在设计一个系统，其中将有 n 个生产者和 m 个消费者，其中 n 和 m 是数字，n != m。我想这样设计系统，任何生产者在生产时不得阻止其他生产者任何消费者都不应在消费时阻止其他消费者
java - 在良好的编程实践中我们应该更喜欢什么？ @Produces ("application/json") 或@Produces(MediaType.APPICATION_JSON)？
关于 REST Web 服务。 @Produces("application/json") 和 @Produces(MediaType.APPICATION_JSON) 两者的工作方式相同，但第二个需
java.lang.NoClassDefFoundError : org/apache/kafka/clients/producer/Producer
我正在尝试使用 Kafka: import java.util.Properties; import org.apache.kafka.clients.producer.Producer; impor
python - Producer.poll(0) 不会产生任何消息，但 Producer.flush() 可以工作
当我使用 Producer.flush() 时，它可以工作，但根据 kafka confluent issue 性能较差，但按照建议，我使用 Producer.poll(0) 但不会向主题生成任何消息
apache-kafka - Python librdkafka Producer 与 native Apache Kafka Producer 执行
我正在针对 Python 的 confluent-kafka 使用 native java 实现测试 Apache Kafka Producer，以查看哪个具有最大吞吐量。我正在使用 docker-
java - @Produces(MediaType.APPLICATION_JSON) 和 @Produces({MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML}) 参数类型的内部详细信息？
我看到 @products 注释允许我传递单个字符串和字符串列表。所以我只是想知道这是如何在java中完成的，如果我需要使用允许以下行为的方法来实现它，我该怎么做？或者这个注释是特定的，所以我们不能在
python - 移动网V2 : Importing graph with lower producer version into a graph with higher producer version
我正在开发一个迁移学习应用程序，我正在其中针对我的数据流重新训练 MobileNetV2。我正在使用 retrain.py 重新训练模型来自tensorflow-hub并且没有做任何修改。当我从终
ssl - Kafka ssl Producer EOFException 而 Producer.send 来自 Cloud Foundry
在 Cloud Foundry 中，我能够向非 ssl url(“kafkaURL:9092”)生成消息。但它不适用于 ssl url(“kafkaURL:9093”)。 Kafka 服务器版本 0.
java - 为什么 Producer.send(record).get() 有效，但 Producer.send(record, callback) 不起作用
我正在使用 kafka 向消费者发送消息。但是由于某种原因，当我使用 Producer.send(record, new MyProducerCallback()); 向主题发送记录时，该主题的使用者
spring - 用于创建 Kafka Producer 的演示应用程序为 java.lang.InstantiationException : null 引发 "Failed to construct kafka producer"错误
我正在编写一个演示应用程序来创建一个 Kafka Producer。我创建了一个主题并在 Kafka 上运行了一个生产者和消费者，它似乎正在工作。我正在编写一个 spring 应用程序来创建一个生产者
java - SpringBoot、Kafka : java. lang.NoSuchMethodError : org. apache.kafka.clients.producer.Producer.close(Ljava/time/Duration;)V
我在我的项目中使用 spring boot v2.2.4 和 Apache Kafka。下面是我的pom.xml文件: org.springframewo
java - 警告 org.apache.kafka.clients.NetworkClient - [Producer clientId=producer-1] Bootstrap 代理 127.0.0.1 :9092 (id: -1 rack: null) disconnected
我正在尝试使用 java 程序制作 Kafka 生产者。但是当我运行程序时我收到了一些警告，没有任何错误但是生产者没有发送数据并且警告如下所示。 [kafka-producer-network-thr
file - 如何将文件写入Kafka Producer
我正在尝试加载一个简单的文本文件而不是 Kafka 中的标准输入。下载 Kafka 后，我执行了以下步骤: 启动动物园管理员: bin/zookeeper-server-start.sh config
java - 如何使用模拟覆盖@Produces
我有一个类，它生成一个 ElasticSearch 客户端以与 @Inject 一起使用 @Produces @ApplicationScoped public Client createClient
java - @Produces 基于条件的注解
对于一个新项目，我们在客户端使用 jQuery 组件，其中之一是 blueImp 文件 uploader 。我们愉快地编写代码，在 Chrome 和 Firefox 中一切都运行良好……直到有人尝试在
java线程: producer - consumer
我有一些开发要做，我尝试看看是否有可以使用的设计模式。问题很简单: 我有一个启动许多线程的主线程。主线程必须等待每个线程完成然后再做其他事情。现有的代码有点难看。我有一个 while 循环来检查线程组
javascript - 如何正确创建新的 Producer？
我正在使用驱动对象模型工具 CodeFluentEntities以便将模型部署到数据库引擎。我正在考虑使用 localStorage 数据库引擎(如 IndexedDB 或 Web SQL)来为没有
java - 无法停止ActiveMQ Producer？
我无法停止 ActiveMQ Producer。场景是:我为内存使用和临时存储设置了较低的值。
java - @Produce 方法的正确使用方法
我正在尝试结合使用 CDI (weld-se 2) 和 JavaFX，并且我想使用自定义创建的注释来注释我的 Controller 类，以便使用我的工厂方法管理此类创建。我想应该如下所示，但这段代码不

首页

博学

6Ren·AI

商城

html - 显示 : Flex not producing content under it