gpt4 book ai didi

css - 使用 css 在 3 列中打印数据

转载 作者:行者123 更新时间:2023-11-28 11:34:00 26 4
gpt4 key购买 nike

我想在 3 列中打印我的数据。但是列中的数据排列不正确。我对 CSS 的了解有限。请指教我哪里做错了?

我需要在 6 和 8 之后的第三列打印一条水平线。

<html>
<head>
<style>
.container{
width: 596px;
float:left;
posy
}
.container .line {
border-bottom: 1px dotted #999;
border-top-style: none;
margin: 7px 0;
padding: 3px 0 0;
}
.col1{

width: 186px;
right-padding:19px;
float:left;
}
.col2{

left: 205px;
right-padding:19px
width: 186px;
float:left;
}
.col3{

left: 410px;
width: 186px;
float:right;
right:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="col1">
<ul>
<li>Test Area 1</li>
<li>Test Area 2</li>
<li>Test Area 3</li>
<li>Test Area 4</li>
</ul>
</div>
<div class="col2">
<ul>
<li>Test Area 5</li>
</ul>
</div>
<div class="col3">
<ul>
<li> Test 6</li>
</ul>
</div>
<div class="line"></div>
<div class="col3">
<ul>
<li>Test Area 7</li>
</ul>
</div>
<div class="col3">
<ul>
<li>Test Area 8</li>
</ul>
</div>
<div class="line"></div>
<div class="col3">
<ul>
<li>Test Area 9</li>
</ul>
</div>
<div class="col3">
<ul>
<li>Test Area 10</li>
</ul>
<div class="col3">
<ul>
<li>Test Area 16</li>
<li>Test Area 17</li>
<li>Test Area 18</li>
<li>Test Area 19</li>
<li>Test Area 20</li>
</ul>
</div>
</div>
<div class="col1">
<ul>
<li>Test Area 11</li>
<li>Test Area 12</li>
<li>Test Area 13</li>
<li>Test Area 14</li>
</ul>
</div>
<div class="col2">
<ul>
<li>Test Area 15</li>
</ul>
</div>
</div>
</html>

This is what I get. enter image description here

最佳答案

这个问题与这里的问题类似: how to split the ng-repeat data with three columns using bootstrap
和这里: 3 column layout HTML/CSS

有几种解决方案。你也可以使用这个 css:

li:nth-child(3) 

关于css - 使用 css 在 3 列中打印数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31232332/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com