寡妇尺寸变化的文字重叠？
我使用了响应式模板来创建餐馆网站。
当窗口缩小到最薄的形式时，菜单价格与文本重叠。
我尝试了绝对定位并改变了宽度和高度百分比，但没有运气。
有没有办法让小窗口与正常情况下的窗口保持一致？
我附上了一张照片，说明它应该是什么样子以及当窗户缩小时的样子。
这是我的HTML：
<body>
<!--banner-->
<section id="banner">
<div class="darken">
<header id="header">
<div class="container">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#about">About Us</a>
<a href="#hours">Hours</a>
<a href="#menu-list">Menu</a>
<a href="#reviews">Reviews</a>
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()" class="pull-right menu-icon">☰</span>
</div>
</header>
<div class="container">
<div class="row">
<div class="inner text-center">
<h3 class="logo-name">The Chow Wagon</h3>
<p>(731) 989-7569</p>
</div>
</div>
</div>
</div>
</section>
<!-- / banner -->
<!--about-->
<section id="about" class="section-padding">
<div class="container">
<div class="row">
<div class="col-md-12 text-center marb-35">
<h5 class="header-h">Our Story</h5><br>
<p class="header-p"> We are a small, family owned business bringing a lot of flavor to Henderson,
Tennessee. The Chow Wagon is a a staple of hometwon fast food, serving
everythign from old-fashioned hamburgers to salads. Come get a taste
of our classic and state-wide known food! </p>
</div>
</div>
</div>
</section>
<!--/about-->
<!-- hours -->
<section id="hours">
<div class="bg-color" class="section-padding">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center" style="padding:60px;">
<h1 class="header-h">Hours of Operation</h1>
<p class="header-p">Monday: 10:30 AM - 10:30 PM <br><br> Tuesday: 10:30 AM - 10:30 PM <br><br> Wednesday: 10:30 AM - 10:30 PM <br> <br> Thursday: 10:30 AM - 10:30
PM <br><br> Friday:10:30 AM - 12:00 AM <br><br> Saturday: 10:30 AM
- 12:00 AM <br><br> Sunday: 12:00 - 10:30 PM </p>
</div>
</div>
</div>
</div>
</section>
<!--/ hours -->
<!-- menu -->
<section id="menu-list" class="section-padding">
<div class="container">
<div class="row">
<div class="col-md-12 text-center marb-35">
<h5 class="header-h">Menu </h5>
<p class="header-p">
</div>
<div id="Container">
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Hamburger</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$2.35</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Cheeseburger</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$2.15</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Jumbo Hamburger</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$3.35</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Jumbo Cheeseburger</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$3.75</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Ham & Cheese Sandwich</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$2.45</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Jumbo Ham & Cheese Sandwich</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$3.45</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Jumbo Ribeye Steak Sandwich</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$5.25</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Chicken Sandwich</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$3.95</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Chicken Bits and Fries</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$4.95</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Fish Sandwich</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$3.00</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title" >Fish and Fries</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$4.25</span>
</span>
</div>
<div class="mix category-2 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title" >Shrimp and Fries</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$5.50</span>
</span>
</div>
<div class="mix category-2 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Hot Dog</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$2.05</span>
</span>
</div>
<div class="mix category-2 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Corn Dog</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$1.60</span>
</span>
</div>
<div class="mix category-3 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Chef Salad</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$4.40</span>
</span>
</div>
<div class="mix category-3 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">French Fries</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$1.60</span>
</span>
</div>
<div class="mix category-3 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Onion Rings</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$1.60</span>
</span>
</div>
<div class="mix category-3 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Fried Mushrooms</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$2.75</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">Tater Tots</p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$1.60</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">9-Inch Cheese Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$5.05</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">12-Inch Cheese Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$6.75</span>
</span>
</div>
<div class="mix c category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">9-Inch Sausage Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$10.50</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">12-Inch Sausage Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$13.50</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">9-Inch Pepperoni Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$10.50</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">12-Inch Pepperoni Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$13.50</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">9-Inch Bacon Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$10.50</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">12-Inch Bacon Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$13.50</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">9-Inch Beef Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$10.50</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">12-Inch Beef Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$13.50</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">9-Inch Beef Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$10.50</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">12-Inch Beef Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$13.50</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">9-Inch Mushroom Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$10.00</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">12-Inch Mushroom Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$12.00</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">9-Inch Pizza with Peppers </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$10.00</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">12-Inch Pizza with Peppers </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$12.00</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">9-Inch Deluxe Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$7.75</span>
</span>
</div>
<div class="mix category-1 menu-restaurant" data-myorder="2">
<span class="clearfix">
<p2 class="menu-title">12-Inch Deluxe Pizza </p2>
<span style="left: 166px; right: 44px;" class="menu-line"></span>
<span class="menu-price">$9.75</span>
</span>
</div>
</div>
</div>
</div>
</section>
<!--/ menu -->
<!-- reviews -->
<section id="reviews">
<div class="bg-color" class="section-padding">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center" style="padding:60px;">
<h1 class="header-h">Our Customers say...</h1>
<p class="header-p">"I ate here yesterday for the first time. That was the best burger I've
had since moving here 3 1/2 years ago. The staff was friendly and the
food made fresh. My only complaint is I couldn't eat more. I will most
definitely be back." - Dorothy </p> <br>
<p class="header- p">
"Great food at a great price! I've never been disappointed!" - John </p>
<br>
<p class="header-p">"Best place to eat in Henderson, TN." - Rene</p><br>
<p class="header-p">"It may be a small place on Main in Henderson, but boy, are those burgers
delicious.... fresh right off the flat iron grill!" -Doralynn </p>
</div>
<div class="col-md-12" style="padding-bottom:60px;">
<div class="item active left">
<div class="content-holder">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/ reviews -->
<!-- footer -->
<footer class="footer text-center">
<div class="footer-top">
<div class="row">
<div class="col-md-offset-3 col-md-6 text-center">
<div class="widget">
<h4 class="widget-title">THe Chow Wagon</h4>
<p class="header-p">241 W Main St
<br>Henderson, Tennessee 38340</p>
<div class="social-list">
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i> </a>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</div>
<p class="copyright clear-float">
© Delicious Theme. All Rights Reserved
<div class="credits">
<!--
All the links in the footer should remain intact.
You can delete the links only if you purchased the pro version.
Licensing information: https://bootstrapmade.com/license/
Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Delicious
-->
Designed by
<p2 href="https://bootstrapmade.com/">BootstrapMade</p2>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- / footer -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/custom.js"></script>
<script src="contactform/contactform.js"></script>
</body>
</html>
2 个答案:
答案 0 :(得分：0)
你在这里使用了错误的标记。学会使用bootstrap网格系统。把你的html这样做
<div class="container">
<div class="row">
<div class="col-md-10">
<!-- Item Goes here -->
</div>
<div class="col-md-2">
<!-- Rate Goes here -->
</div>
</div>
</div>
这样您的商品就不会崩溃并相互覆盖。 Learn grids from here：
答案 1 :(得分：0)
在此处使用Flex属性我使用Flex添加了示例代码。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.items {
display: flex;
flex-direction: columns;
}
.item {
flex: 1;
color: #ccc;
}
.amount{
flex: 1;
color: #ccc;
}<div class="items">
<div class="item">
<h2>Humburger</h2>
</div>
<div class="amount">
<h2>$2.53</h2>
</div>
</div>
<div class="items">
<div class="item">
<h2>Hot Dog</h2>
</div>
<div class="amount">
<h2>$5.53</h2>
</div>
</div>
<div class="items">
<div class="item">
<h2>Stef Salad</h2>
</div>
<div class="amount">
<h2>$2.53</h2>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？