正在尝试创建列 HTML CSS
Trying to Create Columns HTML CSS
我创建了一个列表,其中包含 class 个姓名。当前,当您加载页面时,您会看到所有这些内容,但是是垂直的。
我想做的是让每个浏览器大小的列大小都不同。我试着用列数来做到这一点,但我没有看到 3 列,它们仍然都是垂直的。
例如
900px- 1280px:分3列显示
700px-900px:分两列显示
低于 700 像素:像现在一样垂直
3 列的图片:enter image description here
div h1{
font-size: 2em;
}
li[data-offered-fall=yes]::before {
font-family: FontAwesome;
font-size: 0.75em;
content: "05";
display: inline-block;
padding-left: 0.25em;
color:red;
}
li[data-offered-fall=yes]::after {
font-family: FontAwesome;
font-size: 0.75em;
content: li;
display: inline-block;
padding-left: 0.25em;
color:red;
}
@media screen and (max-width: 1280px)
{
li{
column-count: 3;
}
}
@media screen and (max-width: 900px)
{
li{
column-count: 2;
}
}
@media screen and (max-width: 700px)
{
li{
column-count: 1;
}
}
<div>
<li data-title="Multimedia and the World Wide Web" data-offered-fall="yes">HCI 201</li>
<li data-title="Formatting Digital Pages II" data-offered-fall="no">HCI 271</li>
<li data-title="Foundations of Digital Design" data-offered-fall="no">HCI 302</li>
<li data-title="Analysis and Design for Human-Computer Interaction" data-offered-fall="no">HCI 312</li>
<li data-title="Usability Issues for Electronic Commerce" data-offered-fall="no">HCI 341</li>
<li data-title="Usability in Computing Systems" data-offered-fall="no">HCI 350</li>
<li data-title="Foundations of Digital Design" data-offered-fall="yes">HCI 402</li>
<li data-title="Web Site Design forHCI" data-offered-fall="yes">HCI 406</li>
<li data-title="Designing for Content Management Systems" data-offered-fall="no">HCI 421</li>
<li data-title="Multimedia" data-offered-fall="no">HCI 422</li>
<li data-title="Internet Multimedia" data-offered-fall="no">HCI 423</li>
<li data-title="Prototyping and Implementation" data-offered-fall="yes">HCI 430</li>
<li data-title="User-Centered Web Development" data-offered-fall="no">HCI 432</li>
<li data-title="Introduction to User-Centered Design" data-offered-fall="yes">HCI 440</li>
<li data-title="Introduction to User-Centered Development" data-offered-fall="no">HCI 441</li>
<li data-title="Inquiry Methods and Use Analysis" data-offered-fall="yes">HCI 445</li>
<li data-title="Foundations of Human-Computer Interaction" data-offered-fall="yes">HCI 450</li>
<li data-title="Interaction Design and Information Architecture" data-offered-fall="yes">HCI 454</li>
<li data-title="Information Architecture and Content Strategy" data-offered-fall="no">HCI 457</li>
<li data-title="Usability Evaluation Methods" data-offered-fall="yes">HCI 460</li>
<li data-title="Digital Design" data-offered-fall="yes">HCI 470</li>
<li data-title="Accessibility and Design for Diverse Users" data-offered-fall="yes">HCI 511</li>
<li data-title="Information Visualization and Infographics" data-offered-fall="no">HCI 512</li>
<li data-title="Design/Strategies for Internet Commerce" data-offered-fall="no">HCI 513</li>
<li data-title="Global User Research" data-offered-fall="no">HCI 514</li>
<li data-title="Design Ethnography" data-offered-fall="no">HCI 515</li>
<li data-title="Learner-Centered Design" data-offered-fall="no">HCI 520</li>
<li data-title="UX Strategy and Web Analytics" data-offered-fall="no">HCI 522</li>
<li data-title="Mobile Design" data-offered-fall="no">HCI 530</li>
<li data-title="Embodied Interaction" data-offered-fall="no">HCI 545</li>
<li data-title="Social Interaction Design" data-offered-fall="no">HCI 553</li>
<li data-title="Interaction Design and Analysis" data-offered-fall="no">HCI 558</li>
<li data-title="User Experience Design Practicum" data-offered-fall="no">HCI 580</li>
<li data-title="Topics in Human-Computer Interaction" data-offered-fall="yes">HCI 590</li>
<li data-title="Human-Computer Interaction Capstone" data-offered-fall="yes">HCI 594</li>
<li data-title="CI Research Capstone" data-offered-fall="no">HCI 596</li>
</div>
很简单,因为你在li中使用了column-count css而不是成为li容器的div。
所以你必须做的是,添加 div 的 class 并用 column-count 编写 div 的 css 代码。
@media screen and (max-width: 1280px)
{
.container{
column-count: 3;
}
}
@media screen and (max-width: 900px)
{
.container{
column-count: 2;
}
}
@media screen and (max-width: 700px)
{
.container{
column-count: 1;
}
}
Here the Fiddle. If you read properly the example of w3 school, you will get it. And here's the column-count description at w3, don't forget add the webkit and mozz
我创建了一个列表,其中包含 class 个姓名。当前,当您加载页面时,您会看到所有这些内容,但是是垂直的。
我想做的是让每个浏览器大小的列大小都不同。我试着用列数来做到这一点,但我没有看到 3 列,它们仍然都是垂直的。
例如 900px- 1280px:分3列显示 700px-900px:分两列显示 低于 700 像素:像现在一样垂直
3 列的图片:enter image description here
div h1{
font-size: 2em;
}
li[data-offered-fall=yes]::before {
font-family: FontAwesome;
font-size: 0.75em;
content: "05";
display: inline-block;
padding-left: 0.25em;
color:red;
}
li[data-offered-fall=yes]::after {
font-family: FontAwesome;
font-size: 0.75em;
content: li;
display: inline-block;
padding-left: 0.25em;
color:red;
}
@media screen and (max-width: 1280px)
{
li{
column-count: 3;
}
}
@media screen and (max-width: 900px)
{
li{
column-count: 2;
}
}
@media screen and (max-width: 700px)
{
li{
column-count: 1;
}
}
<div>
<li data-title="Multimedia and the World Wide Web" data-offered-fall="yes">HCI 201</li>
<li data-title="Formatting Digital Pages II" data-offered-fall="no">HCI 271</li>
<li data-title="Foundations of Digital Design" data-offered-fall="no">HCI 302</li>
<li data-title="Analysis and Design for Human-Computer Interaction" data-offered-fall="no">HCI 312</li>
<li data-title="Usability Issues for Electronic Commerce" data-offered-fall="no">HCI 341</li>
<li data-title="Usability in Computing Systems" data-offered-fall="no">HCI 350</li>
<li data-title="Foundations of Digital Design" data-offered-fall="yes">HCI 402</li>
<li data-title="Web Site Design forHCI" data-offered-fall="yes">HCI 406</li>
<li data-title="Designing for Content Management Systems" data-offered-fall="no">HCI 421</li>
<li data-title="Multimedia" data-offered-fall="no">HCI 422</li>
<li data-title="Internet Multimedia" data-offered-fall="no">HCI 423</li>
<li data-title="Prototyping and Implementation" data-offered-fall="yes">HCI 430</li>
<li data-title="User-Centered Web Development" data-offered-fall="no">HCI 432</li>
<li data-title="Introduction to User-Centered Design" data-offered-fall="yes">HCI 440</li>
<li data-title="Introduction to User-Centered Development" data-offered-fall="no">HCI 441</li>
<li data-title="Inquiry Methods and Use Analysis" data-offered-fall="yes">HCI 445</li>
<li data-title="Foundations of Human-Computer Interaction" data-offered-fall="yes">HCI 450</li>
<li data-title="Interaction Design and Information Architecture" data-offered-fall="yes">HCI 454</li>
<li data-title="Information Architecture and Content Strategy" data-offered-fall="no">HCI 457</li>
<li data-title="Usability Evaluation Methods" data-offered-fall="yes">HCI 460</li>
<li data-title="Digital Design" data-offered-fall="yes">HCI 470</li>
<li data-title="Accessibility and Design for Diverse Users" data-offered-fall="yes">HCI 511</li>
<li data-title="Information Visualization and Infographics" data-offered-fall="no">HCI 512</li>
<li data-title="Design/Strategies for Internet Commerce" data-offered-fall="no">HCI 513</li>
<li data-title="Global User Research" data-offered-fall="no">HCI 514</li>
<li data-title="Design Ethnography" data-offered-fall="no">HCI 515</li>
<li data-title="Learner-Centered Design" data-offered-fall="no">HCI 520</li>
<li data-title="UX Strategy and Web Analytics" data-offered-fall="no">HCI 522</li>
<li data-title="Mobile Design" data-offered-fall="no">HCI 530</li>
<li data-title="Embodied Interaction" data-offered-fall="no">HCI 545</li>
<li data-title="Social Interaction Design" data-offered-fall="no">HCI 553</li>
<li data-title="Interaction Design and Analysis" data-offered-fall="no">HCI 558</li>
<li data-title="User Experience Design Practicum" data-offered-fall="no">HCI 580</li>
<li data-title="Topics in Human-Computer Interaction" data-offered-fall="yes">HCI 590</li>
<li data-title="Human-Computer Interaction Capstone" data-offered-fall="yes">HCI 594</li>
<li data-title="CI Research Capstone" data-offered-fall="no">HCI 596</li>
</div>
很简单,因为你在li中使用了column-count css而不是成为li容器的div。
所以你必须做的是,添加 div 的 class 并用 column-count 编写 div 的 css 代码。
@media screen and (max-width: 1280px)
{
.container{
column-count: 3;
}
}
@media screen and (max-width: 900px)
{
.container{
column-count: 2;
}
}
@media screen and (max-width: 700px)
{
.container{
column-count: 1;
}
}
Here the Fiddle. If you read properly the example of w3 school, you will get it. And here's the column-count description at w3, don't forget add the webkit and mozz