下图的布局方式有哪几种?还有没有其他的:
1、左右布局
2、左中右布局
下面代码这种可以实现吗?都在一个盒子里面
ul {
display: flex;
flex-flow: column wrap;
align-content: flex-start;
align-items: flex-start;
height: 60px;
padding: 0;
list-style-type: none;
}
li {
width: 100px;
margin: 0 0 1px 1px;
font: 14px/30px "Microsoft Yahei";
text-align: center;
color: #fff;
background: rgb(255, 105, 122);
}
li:first-child {
line-height: 62px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css.css">
<style>
#box
{
display:flex;
margin:20px;
width:330px;
background:#FF697A;
border-radius:5px;
}
#box > div
{
width:110px;
box-sizing:border-box;
}
#box > div:nth-child(n+2)
{
border-left:1px solid #fff;
}
#box > div > div
{
}
#box > div > div:first-of-type
{
border-bottom:1px solid #fff;
}
#box p
{
text-align:center;
padding:10px 0;
color:#fff;
}
</style>
</head>
<body>
<div id="box">
<div>
<a href="#"><p>酒店</p></a>
</div>
<div>
<div><a href="#"><p>海外酒店</p></a></div>
<div><a href="#"><p>特价酒店</p></a></div>
</div>
<div>
<div><a href="#"><p>团购</p></a></div>
<div><a href="#"><p>名宿.客栈</p></a></div>
</div>
</div>
</body>
</html>
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
3 回答1.4k 阅读✓ 已解决
2 回答2.5k 阅读✓ 已解决
2 回答1.9k 阅读✓ 已解决
3 回答1.1k 阅读✓ 已解决
1 回答3k 阅读✓ 已解决
可以是可以,但这是竖着排的,按着顺序横着排可能有点问题,而且是写死的...