html - 砌体布局中右栏显示的下拉内容
问题描述
我正在使用砌体布局来获得两列,每列都有不同的高度元素。在第一列中,我有一个下拉元素,其中包含 3 个条目。当我将鼠标悬停在下拉列表上时,内容显示在第二列中,而不是第一列。我认为这是因为我使用的砖石布局。如何更新代码以使下拉列表显示第一列中的内容?
这是代码:
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
width: 100%;
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: inline-block;
}
.masonry-wrapper {
column-count: 2;
width: 100%;
}
.item {
float: right;
width: 100%;
}
<body>
<div class="masonry-wrapper">
<div class="item">
<h1> Left item </h1>
</div>
<div class="dropdown">
<h1> Dropdown </h1>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="item">
<h1> Right item </h1>
</div>
</div>
</body>
解决方案
可能不是您想要的,但它可以满足您的要求。删除了“位置:绝对;” 并更改了“显示:块;” 到“显示:内联块;”。
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
width: 100%;
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: inline-block;
}
.masonry-wrapper {
column-count: 2;
width: 100%;
}
.right-item {
float: right;
width: 100%;
}
<body>
<div class="masonry-wrapper">
<div class="dropdown">
<h1> Dropdown </h1>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="right-item">
<h1> Right item </h1>
</div>
</div>
</body>
推荐阅读
- angular - 如何检查位置变量不为空?
- c - libcurl:http响应状态码总是NULL?
- php - 如何在类别和子类别 Laravel 中嵌套同一表中的两列
- neo4j - 在一个密码查询中获取总计数和分页结果(neo4j)
- d3.js - 在 d3js 中使用复杂的数据结构
- android - 在 Manifest 文件中更改 android 包名称
- html - 引导表调整大小/重新组织 col-sm
- python - 用python处理html本地文件
- ios - 计时器倒计时中未显示的所有数字
- php - 为什么 Symfony 3.4 / Doctrine 2.6 删除了我的 ID 字段上的 UNIQUE 约束?