我问的第一个问题!

目前正在构建一个页面,使用Flexbox并排展示一本书的摘录及其翻译.

目标语言是阿拉伯语.

在我目前正在处理的示例中,我似乎无法使这两个框项目具有相同的宽度……

似乎是阿拉伯语的使用打破了平衡.如何才能使第二个框项目获得框元素的50%?

我试图将框项目的宽度调整为自动,但似乎使每个框的宽度根据字符的数量而有所不同. 我try 了宽度:100%,但没有任何成功.

Here is an example with Arabic

Here is an example with Latin alphabet

<body>
     <div class="translation">
     <div class="lang">
       <h3 class="lang-name">Français</h3>
       <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget tellus tempus, eleifend est a, commodo leo. Morbi mattis neque at magna malesuada semper sit amet ut ex. Curabitur facilisis, tortor sit amet vehicula vulputate, risus purus malesuada est, vel laoreet nisi tortor vel dui. Fusce accumsan nisl vel placerat semper. Vivamus id quam vel sapien aliquam semper. Morbi elementum lacinia neque, ullamcorper sodales sem bibendum vel. Vivamus eu volutpat erat.

       <br>Duis et convallis eros, id porta eros. Fusce at finibus nisl. Nulla in dictum neque. Suspendisse sed dui in nibh luctus mollis. Curabitur pharetra dapibus risus nec accumsan. Maecenas tincidunt eget nunc sed pellentesque. Nunc ante arcu, dictum sed odio in, cursus semper est. Cras fermentum, ante vitae aliquet faucibus, odio mi dapibus felis, vel placerat dolor nulla et est.
       </p>
       </div>
     <div class="lang">
       <h3 class="lang-name">Arabe</h3>
       <p class="extract ar">ينتهي السفر في جو ساكن إلى حد ما. لا يتكلم كثيرا الرجلان الجالسان في المقدمة. و الذين في المؤخرة مجتهدون فينكبون على المطالعة أو يلعبون لعبة الإحاجي حسب المناظر التي تتتابع أمام عيونهم. فكان النهار جميلا لكنه يبدأ يمحي قليلا قليلا عند وصولهم إلى مدينة ڤان. و يبقى أقل من ساعة قبل وقوف السيارة أمام منزلهم. سيصلون عند المغيب و هذا طريق جيد لإنهاء النهار بشكل رائع و لإزالة التوترات. 
      <br>
فلما سلكوا الطريق الذي يحاذي ساحل المحيط في المؤخرة ليس هناك ولد واحد فقط بل ولدان مفتونان بالمنظر و يتأثران بهذا المنظر الساحر الذي يرؤونه للمرة الأولى وفي عيونهم وهوج برتقالية تشبه أضواء النفق بشكل مستمر و بشكل أفضل أيضا. بعيدا من نفق يقدم المحيط نفسه لهم. لما ركن پول السيارة جولي تشعر أنها في حلم فتلمح أن الشاطئ قريب في الخلف و قد سمعت هدير الأمواج.
      </p>
      </div>
     </div> </div>
     </article>
</body>```

推荐答案

将FLEX添加到.lang Select 器.这会将Flex-Growth设置为1,这将使两个元素的大小基本相同,而将Flex-Basis设置为0,您可以将其视为标准化初始宽度.如果Flex-Basis设置为AUTO,则可以从子对象继承宽度.

它也不一定非要是.lang Select 符,重要的是在直接指向.box元素的两个元素上进行设置.我使用了.lang类,因为这些元素是示例中.box的两个子元素.

.lang{
    margin: 2em;
    flex: 1 1 0;
} 

请注意,这是与flex: 1 1;相等的速记形式,因为省略基数将默认为0.

如果您没有在子元素上设置此flex,它的子元素将获得默认的flex属性,在此语句中,flex Growth为flex: 0 1 auto;,这意味着我们允许该子元素的大小根据其内容而变化.

Css相关问答推荐

要创建其按钮垂直对齐而不是水平对齐的v-bTN-toggle

隐藏div后缺少div的InnerHTML

实现前景渐变到背景的平滑混合

设置ScaleImageButton的样式

Django:Tailwind 样式不适用于具有小部件属性的模板变量

如何减少弹性项目之间的差距

为什么这个绝对定位的 ::after 伪元素会崩溃,除非父级有过滤器?

停止 div 推动另一个 div 做出react

未知规则 @propertycss(unknownAtRules)

在嵌套的弹性框中创建弹性项目之间的空间

如何在 nth-child 中正确传递 CSS 变量?

如何将 .btn-group 从 twitter-bootstrap 居中?

圆形加载动画

您如何设置 Google Places Autocomplete API 的下拉菜单样式?

  • 元素上的子弹来自哪里?
  • 隐藏元素,但显示 CSS 生成的内容

    悬停时如何在图像上显示文字?

    带有 flexbox 的 css 正方形网格

    thead 和 tbody 之间的间距

    CSS 边距和填充速记属性顺序的助记符