小编Ari*_*ian的帖子

如何创建网格/平铺视图？

例如,我有一些类.article,我想将此类视为网格视图.所以我应用了这种风格:

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

Run Code Online (Sandbox Code Playgroud)

该样式将使.article看起来平铺/网格.固定高度可以正常工作.但是如果我想将高度设置为自动(根据其中的数据自动拉伸),网格看起来很讨厌.

在此输入图像描述

而我想这样的观点:

在此输入图像描述

css grid positioning tiles css-float

Ari*_*ian

2017 09-07

123
推荐指数

4
解决办法

7万
查看次数

将悬停区域扩展到外部元素

我有一个下拉菜单,其子菜单放在不同的元素上.所以基本上当鼠标离开菜单项时,子菜单立即关闭,因为子菜单不是孩子.

var menuItem = $(".menu-item");


menuItem.hover(hoverIn, hoverOut);

function hoverIn() {
  var mnItemMeta = $(this)[0].getBoundingClientRect();

  $(".sub-menu").css({
    opacity: 1,
    left: mnItemMeta.left
  })
}

function hoverOut() {
  $(".sub-menu").css({
    opacity: 0
  })
}

Run Code Online (Sandbox Code Playgroud)

html,body{background-color: #efefef;}
.menu {
  list-style: none;
  padding-left: 0;
  display: flex;
  justify-content: center;
}
a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: inherit;
}
.sub-menu {
  opacity: 0;
  background-color: white;
  position: absolute;
  transition: .2s ease;
}
.sub-menu-list {
  list-style: none;
  padding-left: 0;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
  <li class="menu-item"><a href="#">Menu …

Run Code Online (Sandbox Code Playgroud)

javascript css jquery javascript-events hover

Ari*_*ian

2016 09-24

12
推荐指数

2
解决办法

2073
查看次数

无法在多行表格标题上设置列宽

我在多行表标题上设置列宽度时遇到问题。下面是示例的表标记。

table{
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}
th,td{
	border: 1px solid #e3e3e3;
	padding: 5px 10px;
	word-break: break-word;
}
thead{
	background: white;
}

Run Code Online (Sandbox Code Playgroud)

<table class="table--fixed-header">

	<thead>
		<tr>
			<th rowspan=2>Name</th>
			<th colspan=3>Address</th>
			<th rowspan=2>Email</th>
			<th rowspan=2 style="width:50px">Birthday</th>
			<th rowspan=2>Phone</th>
		</tr>
		<tr>
			<th>Street</th>
			<th>City</th>
			<th style="width:100px">Postal</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Lucius Cotton</td>
			<td>Ap #796-9909 Vulputate St.</td>
			<td>Hope</td>
			<td>4169</td>
			<td><a href="ac@ullamcorper.org">ac@ullamcorper.org</a></td>
			<td>Jan 1, 2016</td>
			<td>(983) 441-5305</td>
		</tr>
		<tr>
			<td>Richard Lloyd</td>
			<td>792-9848 Ante Rd.</td>
			<td>Fermont</td>
			<td>7683</td>
			<td>eget.metus@dolordapibusgravida.com</td>
			<td>May 2, 2016</td>
			<td>(527) 632-2952</td>
		</tr> …

Run Code Online (Sandbox Code Playgroud)

html css html-table

Ari*_*ian

2016 04-26

0
推荐指数

1
解决办法

2033
查看次数