1
我正在尝试创建各个部分的弹出式类,但它不是按照所需对称对齐。如何将ul popover类与我的各个部分对齐?
我希望它看起来像这样:https://www.screencast.com/t/DrbkBj36M
这里是我的CSS/HTML。帮助将不胜感激。
.filters {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
text-align: right;
min-height: 70px;
max-height: 70px;
width: 100%;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 10px;
padding-right: 30px;
}
.locations {
border-right: #DDDDDD solid 1px;
}
.locations, .amenities {
height: 100%;
padding-left: 30px;
flex-grow: 1;
text-align: left;
}
h3 {
font-weight: 600;
line-height: .6;
}
h4 {
font-weight: 400;
font-size: 14px;
line-height: .6;
}
button {
border:none;
border-radius: 4px;
width: 20%;
height: 48px;
font-size: 18px;
background-color: #FF5A5F;
color: white;
margin: 0 30px 0 auto;
}
button:hover {
opacity: 0.9;
}
.popover {
position: absolute;
display: none;
width: inherit;
font-size: 16px;
background-color:#FAFAFA;
border: #DDDDDD 1px solid;
border-radius: 4px;
padding: 0 30px 30px 30px;
margin: 0;
}
.locations:hover .popover {
display: block;
}
.amenities:hover .popover {
display: block;
padding-top: 30px;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="4-common.css" media="all">
<link rel="stylesheet" type="text/css" href="6-filters.css" media="all">
<link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16">
</head>
<body>
<header>
</header>
<div class="container">
<section class="filters">
<div class="locations">
<h3>States</h3>
<h4>California, New York...</h4>
<ul class="popover">
<h2>California</h2>
<li>Berkeley</li>
<li>Los Angeles</li>
<li>San Francisco</li>
<h2>New York</h2>
<li>New York</li>
</ul>
</div>
<div class="amenities">
<h3>Amenities</h3>
<h4>Internet, kitchen...</h4>
<ul class="popover">
<h2>Amenities</h2>
<li>Fiber internets</li>
<li>Big stove</li>
<li>Cryogenic chamber</li>
</ul>
</div>
<button>Search</button>
</section>
</div>
</body>
</html>
哇!真棒。几乎在那里@ user6003859。我想让popover与整个div的外边缘对齐,并将其全部移到下面,所以它看起来像是各个“国家”和“设施”div的扩展。 – jimmytt
好.. howbow dah – user6003859
超级超级关闭@ user6003859。要弄清楚如何将“设施”与分界线对齐,并像一个像素一样向下移动。 – jimmytt