gpt4 book ai didi

html - 如何并排对齐餐厅菜单的标题?

转载 作者:太空宇宙 更新时间:2023-11-04 06:22:35 25 4
gpt4 key购买 nike

我正在为本地一家餐馆建立网站,这是我的第一个网站。我现在正在写菜单,但我不知道如何在屏幕的一半和另一半并排放置主菜单。我也没有成功地让它响应,因为当我把屏幕变小时它变得非常困惑。

我曾尝试使用 col-sm-6 修改 bootstrap 4,但这对我不起作用。我也尝试在 CSS 中使用 flow 和 float,但没有成功。

<div class="menu-title">
<h1>STARTERS</h1>
<div class="menu-items">
<div class="menu-item-body">
<span class="number">1.</span>
<span class="name">Vegetable Spring Roll</span>
<span class="price">4.50&nbsp;€</span>
<div class="description">
Crispy spring roll with shredded cabbage, carrot, sweetcorn and soy sauce.
</div>
</div>
</div>

<div class="menu-items">
<div class="menu-item-body">
<span class="number">2.</span>
<span class="name">Chicken Cheese Roll</span>
<span class="price">4.50&nbsp;€</span>
<div class="description">
Crispy chicken cheese roll with chicken, onion, spring onion and cheese with sweet chilli sauce.
</div>
</div>
</div>

CSS

.menu-title{
flex-direction: column;
}


.menu-items {
width: 100%;
padding: 50px 30px;
flex-flow: row ;
}

.menu-item-body {
float: left;
position: absolute;
overflow-x: hidden;
padding-left: 25px;
margin: 0 1%;
width: 31%;
}
.number {
position: absolute;
left: 0;
}
.name {
background-color: #fff;
}

.name:after {
float: left;
width: 0;
white-space: nowrap;
content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . ";
}
.price {
padding-left: 5px;
float: right !important;
background-color: #fff;
}
.description {
font-size: 14px;
font-weight: 500;
opacity: 0.8;
margin-bottom: 10px;
}

我希望输出能够响应并在更大的屏幕上显示 2 或 3 列菜单标题。

最佳答案

您可以使用媒体查询和一些简单的 float 和伪选择器非常简单地完成此操作。默认情况下,它允许您以正常流堆叠内容(非常适合较小的视口(viewport)),但对于较大的视口(viewport),使用 float 和宽度值并排设置容器。

这是一个简单的基于 float 的布局示例,它允许多个平行部分在多个视口(viewport)上响应良好。这是 a CodePen demo of parallel sections with floats ,然后是工作代码和解释:

body {
background: gray;
}

.parent {
background: white;
overflow: hidden;
padding: 0 1em;
}

@media (min-width: 40em) {
.parallel:not(:only-child) {
box-sizing: border-box;
clear: both;
float: left;
width: 45%;
}

.parallel:nth-of-type(even) {
float: right;
clear: right;
}
}
<div class="parent">
<div class="parallel">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
<div class="parallel">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
<div class="parallel">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
<div class="parallel">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
</div>

<div class="parent">
<div class="parallel">
<h2>Section 5 &#8212 Oops! No siblings!</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
</div>

即使有不同长度的部分, float 也可以在不诉诸高级技术或大量标记的情况下处理布局,方法是让内容在较小的视口(viewport)中保持简单,然后通过媒体查询进行调整以在较大的视口(viewport)上并行运行。

使它干净地运行的一些技术技巧:

  • :not(:only-child) 允许您仅在平行项在其行中有兄弟项时应用较大的视口(viewport)拆分。这只是一个有用的捕获,以防一个部分需要自己排成一行或者临时删除一个兄弟。您无需修改​​标记,而是让 CSS 处理是否拆分屏幕。
  • 向左浮动的元素应该清除两者,向右浮动的元素应该只向右清除。这允许您将多个元素放在同一个父容器和效果行中,而无需添加标记。
  • 要允许各部分错开而不是按行对齐,您可以从媒体查询的第一个选择器中删除 clear: both;。否则将是相同的。

还有其他更现代的解决方案,但这个很好、简单且灵活,标记最少。

关于html - 如何并排对齐餐厅菜单的标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55345687/

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