Question

我有像这样的HTML代码

<div class="group">
<span class="big-letters"></span>
<a>links 1</a>
<a>links 2</a>
<a>links 3</a>
</div>
<div class="group">
<span class="big-letters"></span>
<a>links 1</a>
<a>links 2</a>
<a>links 3</a>
</div>
<div class="group">
<span class="big-letters"></span>
<a>links 1</a>
<a>links 2</a>
<a>links 3</a>
</div>
<div class="group">
<span class="big-letters"></span>
<a>links 1</a>
<a>links 2</a>
<a>links 3</a>
</div>

编写了我的代码，附加了css后，我得到了这个输出

code result

但这就是预期的产出 expected result

任何人都知道如何仅使用css并且不添加额外的div包装器来实现此目的。目的是使其可以轻松调整到任何设备的屏幕。很想知道是否有其他方法可以做到这一点。

（如果这是一个重复的帖子，请立即通知我，并给我其他类似帖子的链接，我找不到这样的东西，因为我无法确定使用的确切关键词。谢谢）

Answer 1

尝试使用这样的列数：

<html>
<head>
<style type="text/css">
body{
width: 100%;
max-width: 800px;
-moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;}
.group {    
    border: 1px solid black;
    margin: 0 5px 5px 0;    
}
.group a{
    display: list-item;
}
.big-letters{
    font-size: 44px;
    color: red;
}
</style>
</head>
<body>
<div class="group">
<span class="big-letters">A</span>
<a href="#">links 1</a>
<a href="#">links 2</a>
<a href="#">links 3</a>
<a href="#">links 1</a>
<a href="#">links 2</a>
<a href="#">links 3</a>
</div>
<div class="group">
<span class="big-letters">B</span>
<a href="#">links 1</a>
</div>
<div class="group">
<span class="big-letters">C</span>
<a href="#">links 1</a>
<a href="#">links 2</a>
<a href="#">links 3</a>
</div>
<div class="group">
<span class="big-letters">D</span>
<a href="#">links 1</a>
<a href="#">links 2</a>
<a href="#">links 3</a>
</div>
<div class="group">
<span class="big-letters">E</span>
<a href="#">links 1</a>
<a href="#">links 2</a>
<a href="#">links 3</a>
</div>
<div class="group">
<span class="big-letters">F</span>
<a href="#">links 1</a>
<a href="#">links 2</a>
<a href="#">links 3</a>
</div>
<div class="group">
<span class="big-letters">G</span>
<a href="#">links 1</a>
<a href="#">links 2</a>
<a href="#">links 3</a>
</div>
<div class="group">
<span class="big-letters">H</span>
<a href="#">links 1</a>
<a href="#">links 2</a>
<a href="#">links 3</a>
</div>
<div class="group">
<span class="big-letters">I</span>
<a href="#">links 1</a>
<a href="#">links 2</a>
<a href="#">links 3</a>
</div>
</body>
</html>

希望它会对你有所帮助。

Answer 2

你可以这样做：

.box {
    width:60%;
    -webkit-column-count: 3;
    /* Chrome, Safari, Opera */
    -moz-column-count: 3;
    /* Firefox */
    column-count: 3;
}
.group {
    width:60%;
    display:inline-block;
    height:auto;
    background:#ededed;
    border:1px solid #ccc;
    margin:20px;
    padding:20px;
}
.group a {
    display:block;
    width:100%;
    margin:10px auto;
}
.big-letters {
    font-size:30px;
    color:#f60;
    display:block;
}

see fiddle

通过这种方式，您可以保持＆＃34; snake＆＃34; （向上 - >向上和向上）的顺序，而不是通常的html float 从左到右

如何在图片中垂直对齐div

2 个答案: