如何使2个元素宽度相同?

问题描述 投票:0回答:1

我问的第一个问题!

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

目标语言是阿拉伯语。

在我当前正在研究的示例中,我似乎无法使两个盒子项目具有相同的宽度......

看来是阿拉伯语的使用打破了平衡。如何使第二个框项占据框元素的 50%?

我尝试将框项的宽度调整为自动,但似乎使每个框的宽度根据字符数而变化。 我尝试了宽度:100%,但没有成功。

这是阿拉伯语的示例

这是拉丁字母的示例

<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>```

css flexbox arabic latin
1个回答
0
投票

将 flex 添加到 .lang 选择器。这会将 flex-grow 和 flex-shrink 设置为 1,这基本上使两者保持相同的大小。

.lang{
    margin: 2em;
    flex: 1 1;
} 
© www.soinside.com 2019 - 2024. All rights reserved.