blocks|key|1270402|text|只需在#main-容器中的每个div中添加显示:flex；即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1270403|​|1270404|#main-container+{
++display:+flex;
++background-color:+rgb(24,+30,+30);
++margin-top:+1%25;
++align-content:+center;
++justify-content:+center;
++width:+65%25;
++font-size:+1.5vmin;
}
#main-container+>+div+>+img+{
++++width:+100%25;
}
#main-container+>+div+{
++++display:+flex;
++++flex-direction:+column;
++++justify-content:+center;
++++align-items:+center;
}
#main-container+>+div:nth-of-type(1)+{
++++width:+15%25;
}
#main-container+>+div:nth-of-type(2)+{
++++width:+25%25;
}
#main-container+>+div:nth-of-type(3)+{
++++width:+30%25;
}
#main-container+>+div:nth-of-type(4)+{
++++width:+30%25;
}
#main-container+div+{
++background-color:+bisque;
++align-items:+center;
++width:+65%25;
}

#main-container+button+{
++color:+white;
++background-color:+#117CC0;
}

#main-container+h1+{
++text-align:+center;
}
p,+h1+{
++++margin:+0;
}|code-block|syntax|javascript|1270405|<!DOCTYPE+html>
<html+lang="en">

<head>
++++<meta+charset="UTF-8">
++++<meta+http-equiv="X-UA-Compatible"+content="IE=edge">
++++<meta+name="viewport"+content="width=device-width,+initial-scale=1.0">
++++<title>Document</title>
++++<link+rel="stylesheet"+href="style.css">
</head>

<body>
++++<div+id="main-container">
++++++++<div>
++++++++++++<h1>10.99</h1>
++++++++++++<p>UDS/DAY</p>
++++++++++++<button>SELECT</button>
++++++++++++<P>Total+76.93+USD</P>
++++++++</div>
++++++++<div>
++++++++++++<img+src="green-car2.png"+/>
++++++++++++<p>Extra+Small+Car</p>
++++++++</div>
++++++++<div>
++++++++++++<p>x4+Passengers</p>
++++++++++++<p>x4+Passengers</p>
++++++++++++<p>x4+Passengers</p>
++++++++</div>
++++++++<div>
++++++++++++<p>Air+Conditioning</p>
++++++++++++<p>Air+Conditioning</p>
++++++++++++<p>Air+Conditioning</p>
++++++++</div>
++++</div>
++++<script+src="script.js"></script>

</body>

</html>|1270406|1270407|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Just add display:flex; to every div in #main-container.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#main-container {
  display: flex;
  background-color: rgb(24, 30, 30);
  margin-top: 1%;
  align-content: center;
  justify-content: center;
  width: 65%;
  font-size: 1.5vmin;
}
#main-container &gt; div &gt; img {
    width: 100%;
}
#main-container &gt; div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#main-container &gt; div:nth-of-type(1) {
    width: 15%;
}
#main-container &gt; div:nth-of-type(2) {
    width: 25%;
}
#main-container &gt; div:nth-of-type(3) {
    width: 30%;
}
#main-container &gt; div:nth-of-type(4) {
    width: 30%;
}
#main-container div {
  background-color: bisque;
  align-items: center;
  width: 65%;
}

#main-container button {
  color: white;
  background-color: #117CC0;
}

#main-container h1 {
  text-align: center;
}
p, h1 {
    margin: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="main-container"&gt;
        &lt;div&gt;
            &lt;h1&gt;10.99&lt;/h1&gt;
            &lt;p&gt;UDS/DAY&lt;/p&gt;
            &lt;button&gt;SELECT&lt;/button&gt;
            &lt;P&gt;Total 76.93 USD&lt;/P&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;img src="green-car2.png" /&gt;
            &lt;p&gt;Extra Small Car&lt;/p&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;p&gt;x4 Passengers&lt;/p&gt;
            &lt;p&gt;x4 Passengers&lt;/p&gt;
            &lt;p&gt;x4 Passengers&lt;/p&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;p&gt;Air Conditioning&lt;/p&gt;
            &lt;p&gt;Air Conditioning&lt;/p&gt;
            &lt;p&gt;Air Conditioning&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|450307|text|看起来您需要表，所以我建议您使用适当的表标签。下面是实现的一个示例(使用表标记和flex)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|450308|​|450309|<html>
++<head>
++++<title>Testing+on+IE+11</title>
++++<meta+http-equiv="Content-Type"+content="text/html;+charset=utf-8"+/>
++++<style+type="text/css">
++++++body+{
++++++++margin:+0;
++++++++padding:+0;
++++++}

++++++button+{
++++++++background-color:+#3b5998;
++++++++border:+none;
++++++++color:+white;
++++++++padding:+3px+10px;
++++++}

++++++td+{
++++++++display:+flex;
++++++++align-items:+center;
++++++++flex-direction:+column;
++++++}

++++++span,
++++++button+{
++++++++margin:+1px+0;
++++++}

++++++td+>+span:nth-child(1)+{
++++++++font-size:+24px;
++++++++font-weight:+bold;
++++++}
++++++td+>+span:nth-child(2)+{
++++++++font-size:+14px;
++++++++color:+#595959;
++++++}
++++++td+>+span:nth-child(4)+{
++++++++font-size:+12px;
++++++++color:+#8c8c8c;
++++++}
++++</style>
++</head>

++<body>
++++<div+class="page-container">
++++++<table>
++++++++<tr>
++++++++++<th>Example+header+1</th>
++++++++++<th>Car+image</th>
++++++++++<th>Capacity</th>
++++++++++<th>Features</th>
++++++++</tr>
++++++++<tr>
++++++++++<td>
++++++++++++<span>10.99</span>
++++++++++++<span>USD/DAY</span>
++++++++++++<button>SELECT</button>
++++++++++++<span>TOTAL+<b>76.93</b>+USD</span>
++++++++++</td>
++++++++</tr>
++++++</table>
++++</div>
++</body>
</html>|code-block|syntax|javascript|450310|450311|如果您想学习如何使用flex，我建议您阅读文档。最诚挚的问候，快乐的编码！|450312|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table|1|https://developer.mozilla.org/en-US/docs/Web/CSS/flex^0|J|3|0|0|0|0|0|L|2|1|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|N|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]|V|$5|Q|R|S|C|$T|W]]]]

<p>It looks like you want tables, so I recommend that you use appropriate <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table" rel="nofollow noreferrer">table tags</a>.
Below is an example of the implementation (using table tags and flex):</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Testing on IE 11&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;style type="text/css"&gt;
      body {
        margin: 0;
        padding: 0;
      }

      button {
        background-color: #3b5998;
        border: none;
        color: white;
        padding: 3px 10px;
      }

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

      span,
      button {
        margin: 1px 0;
      }

      td &gt; span:nth-child(1) {
        font-size: 24px;
        font-weight: bold;
      }
      td &gt; span:nth-child(2) {
        font-size: 14px;
        color: #595959;
      }
      td &gt; span:nth-child(4) {
        font-size: 12px;
        color: #8c8c8c;
      }
    &lt;/style&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;div class="page-container"&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;Example header 1&lt;/th&gt;
          &lt;th&gt;Car image&lt;/th&gt;
          &lt;th&gt;Capacity&lt;/th&gt;
          &lt;th&gt;Features&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;span&gt;10.99&lt;/span&gt;
            &lt;span&gt;USD/DAY&lt;/span&gt;
            &lt;button&gt;SELECT&lt;/button&gt;
            &lt;span&gt;TOTAL &lt;b&gt;76.93&lt;/b&gt; USD&lt;/span&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>
<p>If you want to learn how to use flex, I recommend that you read the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex" rel="nofollow noreferrer">documentation</a>. Best regards, happy coding!</p>


<p>I am practicing hands-on project with <code>HTML</code> &amp; <code>CSS</code> using flex, this project has seven rows and 4 columns, I have used <code>div</code> to create columns and so far I am working on the first column which mentions price but I am unable to do so as per the image I have attached of the project. I have shared my code below of HTML and CSS.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#main-container {
  display: flex;
  background-color: rgb(24, 30, 30);
  margin-top: 1%;
  align-content: center;
  justify-content: center;
  width: 65%;
  font-size: 1.5vmin;
}

#main-container div {
  background-color: bisque;
  align-items: center;
  width: 65%;
}

#main-container button {
  color: white;
  background-color: #117CC0;
}

#main-container h1 {
  text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main-container"&gt;
  &lt;div&gt;
    &lt;h1&gt;10.99&lt;/h1&gt;
    &lt;p&gt;UDS/DAY&lt;/p&gt;
    &lt;button&gt;SELECT&lt;/button&gt;
    &lt;P&gt;Total 76.93 USD&lt;/P&gt;
  &lt;/div&gt;
  &lt;div&gt;car image&lt;/div&gt;
  &lt;div&gt;capacity&lt;/div&gt;
  &lt;div&gt;features&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>If someone can please help me how to do it and also in making me understand the logic.<a href="https://i.stack.imgur.com/U0Dfb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U0Dfb.png" alt="enter image description here" /></a></p>


how to align contents in div using flexbox

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用flex与HTML & CSS一起实践动手项目，这个项目有7行4列，我使用div创建了列，到目前为止我正在编写第一列，其中提到了价格，但我无法按照我所附的项目的图像来完成。我已经分享了我下面的HTML和CSS代码。​#main-container {  display: flex;  background-c...

问如何使用柔性盒对齐div中的内容
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用柔性盒对齐div中的内容EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用柔性盒对齐div中的内容
EN