html - HTML-CSS,Divs 重叠
问题描述
我不确定为什么这些 div 是重叠的。我在一个 div 元素中有定价 div divpricecontainer
的绿色背景Start with your personalized quote here
是“重叠”。
它应该看起来像这样,但上面有价格容器。
这是CSS:
<!--
Styling for the pricing info box
-->
* {
box-sizing: border-box;
}
/* Create three columns of equal width */
.pricecontainer .columns {
float: left;
width: 33.3%;
padding: 8px;
}
/* Style the list */
.pricecontainer .price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* Add shadows on hover */
.pricecontainer .price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
/* Pricing header */
.pricecontainer .price .header {
background-color: #111;
color: white;
font-size: 25px;
}
/* List items */
.pricecontainer .price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
/* Grey list item */
.pricecontainer .price .grey {
background-color: #eee;
font-size: 20px;
}
/* The "Sign Up" button */
.pricecontainer.info {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
.pricecontainer .columns {
width: 100%;
}
}
<!--
End of styling for pricing info box
-->
.quote {
margin-top: 100px;
width: 100%;
}
.quoteheader {
font-size: 30px;
font-color: white;
background-color: #00A63F;
color: white;
text-align: center;
}
.quotebody {
margin-top: 5vh !important;
width: 50%;
margin: 0 auto;
}
.button {
text-align: center;
}
这是适当的 html 代码:
<div class="pricecontainer">
<div class="columns">
<ul class="price">
<li class="header">Blogs</li>
<li class="grey">$ 74.99</li>
<li>One page designed just for a blog.</li>
<li>Simple admin page to update blog.</li>
<li>Register and Login page to give access to post updates on blog.</li>
<li>Pick the colors you want us to design with.</li>
<li>+ More</li>
<li class="grey"><a href="#" class="info">Sign Up</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Personal</li>
<li class="grey">$ 89.99</li>
<li>Home page designed for you.</li>
<li>Make your skills look even better online.</li>
<li>Image slideshow's</li>
<li>Pick the colors you want us to design with.</li>
<li>+ More</li>
<li class="grey"><a href="#" class="info">Sign Up</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Small Business</li>
<li class="grey">$ 199.99</li>
<li>Home page with navigation bar and your graphics.</li>
<li>Allow online purchases.</li>
<li>Register and Login page to allow online purchases.</li>
<li>About-Us/Contact pages.</li>
<li>Pick the colors you want us to design with.</li>
<li>+ More</li>
<li class="grey"><a href="#" class="info">Sign Up</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Forums</li>
<li class="grey">$ 249.99</li>
<li>Home page with navigation links.</li>
<li>Simple admin page to give special access.</li>
<li>Register and Login page.</li>
<li>Create topics and sub-topics.</li>
<li>Pick the colors you want us to design with.</li>
<li>+ More</li>
<li class="grey"><a href="#" class="info">Sign Up</a></li>
</ul>
</div>
</div>
<div class="bodycontainer">
<div class="quote">
<div class="quoteheader">
Start with your personalized quote here!
</div>
<div class="quotebody">
<form action="quote/quote.php" method="post">
<?php
if(!isset($_SESSION["active"])){
?>
<div class="form-group">
<label for="firstname">First name:</label>
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First name...">
</div>
<div class="form-group">
<label for="lastname">Last name:</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name...">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email...">
</div>
<?php
}
?>
<div class="form-group">
<label for="reason">What is this quote for?</label>
<input type="text" class="form-control" id="reason" name="reason" placeholder="Describe what type of website this will be for...">
</div>
<div class="button">
<button type="submit" name="start" class="btn btn-default">Lets Start!</button>
</div>
</form>
</div>
</div>
</div>
任何帮助或意见表示赞赏,谢谢。
解决方案
只需删除
* {
box-sizing: border-box;
}
并更换
.pricecontainer {
display: inline-block;
}
所以你的最终代码是:
.pricecontainer {
display: inline-block;
}
/* Create three columns of equal width */
.pricecontainer .columns {
float: left;
width: 33.3%;
padding: 8px;
}
/* Style the list */
.pricecontainer .price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* Add shadows on hover */
.pricecontainer .price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
/* Pricing header */
.pricecontainer .price .header {
background-color: #111;
color: white;
font-size: 25px;
}
/* List items */
.pricecontainer .price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
/* Grey list item */
.pricecontainer .price .grey {
background-color: #eee;
font-size: 20px;
}
/* The "Sign Up" button */
.pricecontainer.info {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
.pricecontainer .columns {
width: 100%;
}
}
<!--
End of styling for pricing info box
-->
.quote {
margin-top: 100px;
width: 100%;
}
.quoteheader {
font-size: 30px;
font-color: white;
background-color: #00A63F;
color: white;
text-align: center;
}
.quotebody {
margin-top: 5vh !important;
width: 50%;
margin: 0 auto;
}
.button {
text-align: center;
}
无需更改您的 HTML。
推荐阅读
- google-chrome - 如何在chrome中激活布局选项卡
- java - 如何通过组合两个不同的变量来创建变量名
- python - 如何获取 Windows 服务器的“发布 ID”?
- rtf - 需要 RichText 和 RichTextParagraph 文档
- excel - 内置 Excel 函数在 VBA 代码中不起作用 - 我的错误是什么?
- c# - 处理来自受限 AppDomain 的事件时如何避免安全限制?
- microsoft-graph-api - 如果我已经拥有访问权限和授权令牌,如何访问 microsoft graph
- javascript - 用于从自然语言字符串中提取时间的正则表达式
- ckan - Ckan atom feeds:在 cms 网站上观看 ckan feeds
- c# - 有没有办法在 devexpress TreeListControl 中通过拖放重新排列节点时预览元素的位置?