问题：

我怎样才能使我的文本看起来是并排的和有回应的？

干京

2023-03-14

我试图使我的代码并排，但似乎这对我不是有利的几率。我很难让它们并排。下面是我使用的代码：

  <div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
    <h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >5</h2>
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p> 
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
  </div>
  <div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
    <h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >40</h2>
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p> 
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
  </div>
  <div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
    <h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >90</h2>
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p> 
    <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
  </div>
</div>

当我尝试它的现场，它只出现在数字的底部，而不是在文字的侧面。我尝试使它作为一个6列布局，但它看起来比这一个可怕，我也尝试添加一个浮动框，但它没有工作的一样。

这就是我想要实现的：我想要实现的

我错过什么了吗？提前多谢了。

共有2个答案

步弘和

2023-03-14

在这种情况下，您必须使用Flex Box。

<div style="display:flex;justify-content: space-between;align-items: center;">
    <div class="column" style="display:flex;box-sizing:border-box;text-align:center; padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
        <h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >5</h2>
        <div>
            <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p> 
            <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
        </div>
    </div>
    <div class="column" style="display:flex;box-sizing:border-box;text-align:center; padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
        <h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >40</h2>
        <div>
            <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p> 
            <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
        </div>
    </div>
    <div class="column" style="display:flex;box-sizing:border-box;text-align:center; padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
        <h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >90</h2>
        <div>
            <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p> 
            <p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
        </div>
    </div>
    </div>
</div>

我建议你接受第二个答案。

冯文彬

2023-03-14

在CSSflexbox的帮助下，相关单元和HTML的一些结构，您可以得到您想要的结果：

null

.columns {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    width: 100vw;

    margin: auto;
}

.column {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.big-num {
    font-size: 10vw;
}

.text-container {
    line-height: 0;
    margin-left: 2.5vw;
}

.text {
    font-size: 1.75vw;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="columns">
        <div class="column" >
            <h2 class="big-num">5</h2>
            <div class="text-container">
                <p class="text">Lorem Ipsum</p> 
                <p class="text">Dolor Sit Amet</p>
            </div>
          </div>
          <div class="column">
            <h2 class="big-num">40</h2>
            <div class="text-container">
                <p class="text">Lorem Ipsum</p> 
                <p class="text">Dolor Sit Amet</p>
            </div>
          </div>
          <div class="column">
            <h2 class="big-num">90</h2>
            <div class="text-container">
                <p class="text">Lorem Ipsum</p> 
                <p class="text">Dolor Sit Amet</p>
            </div>
          </div>
        </div>
    </div>
</body>
</html>

类似资料：

我怎样才能把Flink和德鲁伊联系起来？

我试图把Flink和德鲁伊联系起来。然而，我不知道如何正确地做到这一点。在此Flink留档中，"bootstrap.servers"设置为"localhost:9092"。这是否意味着我可以使用Apache Kafka摄取直接连接，因为下面设置了示例主管规范？除了Flink，我还需要管理Kafka吗？或者我应该做其他事情来连接Flink和德鲁伊？
我怎样才能回到循环的开始？

如果我的问题看起来很长，我道歉。我会尽量简明扼要。问题：编写一个程序，将以千克为单位的估算重量转换为磅。如果用户输入负值，程序应要求玩家重新输入数字。我创建了三个函数。第一个函数-返回玩家输入第二个函数-返回以磅为单位的权重第三个函数-如果权重为正，返回以磅为单位的值，或者如果值为负，要求另一个输入。如果相同的值为正数，我的程序将返回正确的值。然而，当我输入一个负浮点数时，我的程序将永远打印
我怎样才能对ArrayList进行排序？

问题内容：这是一个简单的ArrayList排序程序：我期望该程序的输出为：但是当我运行该程序时，我得到的输出为：为什么会这样？如何使ArrayList进行排序，如预期输出所示？问题答案：您可以编写一个自定义比较器：
我怎样才能查看一个文件的“代码”。mp4视频文件？

我知道我的术语不正确，但说到视频，我完全是个新手。我有固定的工作。mp4视频文件。我使用MP4Box对视频文件进行分段，以便使用支持MPEG dash的视频播放器播放。它不是通过创建多个较小的视频文件来分割的。它创建了一个比旧视频文件大一点的新的大视频文件。我想比较一下普通视频文件和虚线视频文件，看看MP4Box对它做了什么来分割它。我相信这是在给新的视频文件添加某种类型的头文件。显然，当我在
我怎样才能使AngularJS指令stopPropagation？

问题内容：我试图“ stopPropagation”以防止单击li内的元素（链接）时关闭TwitterBootstrap导航栏下拉菜单。在Angular中，看起来像指令是执行此操作的地方？所以我有： …但是该方法不属于元素：我把指令与有什么建议么？问题答案： “当前一些指令（即ng：click）停止事件传播。这阻止了与依赖于捕获此类事件的其他框架的互操作性。” - …并且能够在没有指令的
我怎样才能得到无尽的期望？[副本]

我使用Selenium，需要无休止地等待页面加载（因为加载需要几个小时），然后解析其中的数据。我该怎么做？我使用这样的一些代码：

我怎样才能使我的文本看起来是并排的和有回应的？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档