gpt4 book ai didi

html - 如何使下面的用户界面完全响应

转载 作者:行者123 更新时间:2023-11-28 04:02:36 25 4
gpt4 key购买 nike

Please take a look at this design

下面是我的 html,目前仅适用于 2 条腿/航类,但我应该能够设计最多 5 条腿。

目前,我已经为中间的线条指定了百分比宽度,其余元素具有固定宽度。

<div class="roster-steps">

<span class="roster-points">DOH</span>
<span class="roster-meta-bottom-step-one font-size-065">E17 MAR 10:30</span>
<span class="fa fa-circle-thin fa-lg"></span>

<span class="o-arrow"><hr class="hr-custom-three"></span>

<span><i class="fa fa-plane roster-points" ></i></span>
<span class="roster-meta-step2-top font-size-065">QR 2345 A360</span>
<span class="roster-meta-bottom-step-two font-size-065">10:30 hrs</span>
<span class="roster-meta-bottom-step-twosub font-size-065"><span class="two-sub1" >OP</span><span class="two-sub2">B</span></span>

<span class="arrow-o"><hr class="hr-custom-three" ></span>

<span class="fa fa-circle-thin fa-lg"></span>
<span class="roster-points">LHR</span>
<span class="roster-meta-bottom-step-three font-size-065"><i class="fa fa-plane"></i> E17 MAR 16:30</span>
<span class="roster-meta-bottom-step-threesub font-size-065"><i class="fa fa-plane fa-rotate-90"></i> E17 MAR 17:30</span>
<span class="fa fa-circle-thin fa-lg"></span>

<span class="o-arrow"><hr class="hr-custom-three" ></span>

<span><i class="fa fa-taxi roster-points" ></i></span>
<span class="roster-meta-step4-top font-size-065">TAXI</span>
<span class="roster-meta-bottom-step-four font-size-065">1:30 hrs</span>
<span class="roster-meta-bottom-step-foursub font-size-065"><span class="four-sub1" >DH</span></span>

<span class="arrow-o"><hr class="hr-custom-three" ></span>

<span class="fa fa-circle-thin fa-lg"></span>
<span class="roster-points">LGW</span>
<span class="roster-meta-bottom-step-one font-size-065">E17 MAR 20:00</span>

</div>

非常感谢任何正确方向的指导。

编辑:

现在不能让它垂直,因为设计团队已经同意了。

因此使用 css 网格布局非常容易:

Check it out

注意:要在 chrome 中查看需要打开实验标志。首先加载 chrome://flags URL 并向下滚动到启用实验性 Web 平台功能的选项

但由于主流浏览器仍不支持 css 网格布局,是否有更可靠的替代方案?

谢谢。

最佳答案

您应该使用媒体查询。像这样的东西:

@media screen and (max-width:450px){
/**
your css code for mobile version of website
**/
}

您可以从此处了解有关响应能力的更多信息:responsive website css

关于html - 如何使下面的用户界面完全响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43115256/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com