尝试使用与此类似的HTML和CSS编码网格
[英]Trying to code a grid using HTML and CSS similar to this
问题描述
I am trying to make a grid where different majors are listed, similar to this but instead of 4 columns, I want 3... grid similar to this 
我正在尝试制作一个列出了不同专业的网格，类似于此，但我希望3 ... 网格类似于此，而不是4列
So far I'm trying to work with this but the padding is really off because each button needs different padding according to the size of the word inside. 到目前为止，我一直在尝试使用此功能，但是填充实际上是关闭的，因为每个按钮根据内部单词的大小需要不同的填充。 So using this code the output looks like this... (ps. bootstrap is linked so there is no problem with that) 因此，使用此代码，输出看起来像这样……（ps。bootstrap已链接，因此没有问题）
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body style="background-color:white">
<!-- heading -->
<div class="container-fluid">
<div class="tab">
<div class="row">
<div class="col">
<button class="tablinks" onclick="openTab(event, 'Button1')">Accounting and Information Systems</button>
</div>
<div class="col">
<button class="tablinks" onclick="openTab(event, 'Button2')">African Studies</button>
</div>
<div class="col">
<button class="tablinks" onclick="openTab(event, 'Button3')">American Indian Studies</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="tablinks" onclick="openTab(event, 'Button1')">Anthropology</button>
</div>
<div class="col">
<button class="tablinks" onclick="openTab(event, 'Button2')">Art</button>
</div>
<div class="col">
<button class="tablinks" onclick="openTab(event, 'Button3')">Asian American Studies</button>
</div>
</div>
</div>
</div>
</body>
</html>
4 个解决方案
解决方案1
0 2018-03-10 04:55:37
Check the spelling of class in <div clas="col"> 在<div clas="col">检查类的拼写
You may want to consider using a html table as it is designed for what you want to do in this scenario and the cells will not wrap when you reduce the screen width. 您可能要考虑使用html表，因为它是针对这种情况下要执行的操作而设计的，并且当您减小屏幕宽度时，单元格不会换行。
解决方案2
0 2018-03-10 05:03:37
Please try below HTML and CSS to make a grid.You can also give padding and other css to every column with style hope it will work. 请尝试在HTML和CSS下方创建网格。您还可以为每列添加填充和其他CSS，并希望它们能起作用。
HTML
<div class="srow">
<div class="scol">
<button class="tablinks" onclick="openTab(event, 'Button2')">Accounting and Information Systems</button>
</div>
<div class="scol">
<button class="tablinks" onclick="openTab(event, 'Button3')">African Studies</button>
</div>
<div class="scol">
<button class="tablinks" onclick="openTab(event, 'Button1')">American Indian Studies</button>
</div>
</div>
<div class="srow">
<div class="scol">
<button class="tablinks" onclick="openTab(event, 'Button2')">Anthropology</button>
</div>
<div class="scol">
<button class="tablinks" onclick="openTab(event, 'Button3')">Art</button>
</div>
<div class="scol">
<button class="tablinks" onclick="openTab(event, 'Button1')">Asian American Studies</button>
</div>
</div>
CSS
.srow{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
padding: 5px;
width: 100%;
}
.scol{
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
padding: 5px;
width: 100%;
}
解决方案3
0 2018-03-10 05:08:31
What you want to do is use a table, it's best suited for this sort of tabular data. 您想要做的就是使用一个表，它最适合这种表格数据。 The only drawback to it is responsiveness on mobiles, but you can put it in a div that is set to overflow-x hidden at a certain width, then the user can swipe/scroll to see all the data. 它的唯一缺点是在移动设备上具有响应性，但是您可以将其放在一个div中，该div设置为以特定宽度隐藏的溢出-x，然后用户可以滑动/滚动以查看所有数据。
table tr td { margin: 0; padding: .25em; width: 25%; border: 1px solid #cccccc; } a { color: #2d2d2d; }
<table> <tr> <td><a href="#">Accounting and Information Systems</a></td> <td><a href="#">Civic and Community Engagement</a></td> <td><a href="#">Health Sciences</a></td> <td><a href="#">Physical Therapy</a></td> </tr> </table>
解决方案4
0 2018-03-10 05:14:34
Try this. 尝试这个。 I have added some css and button tag change into a tag. 我增加了一些CSS和button标签改变成a标签。
.tab .col { background: #fff; border: 1px solid #ccc; } .tablinks { text-align: center; display: block; padding: 10px 0; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="tab"> <div class="row"> <div class="col"> <a class="tablinks" onclick="openTab(event, 'Button1')">Accounting and Information Systems</a> </div> <div class="col"> <a class="tablinks" onclick="openTab(event, 'Button2')">African Studies</a> </div> <div class="col"> <a class="tablinks" onclick="openTab(event, 'Button3')">American Indian Studies</a> </div> </div> <div class="row"> <div class="col"> <a class="tablinks" onclick="openTab(event, 'Button1')">Anthropology</a> </div> <div class="col"> <a class="tablinks" onclick="openTab(event, 'Button2')">Art</a> </div> <div class="col"> <a class="tablinks" onclick="openTab(event, 'Button3')">Asian American Studies</a> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.