我怎样才能使下面在Materialize中编码的列等间距排列。这就是我想要的间距排列方式
- 小屏幕-每行1列，尺寸s10
- 中型屏幕-每行3列，尺寸m3
- 大屏幕-每行3列，尺寸l3
我希望他们之间有相同的空间和屏幕的边缘。
nav {
background-color: #271675 !important;
display: flex;
}
.intro {
margin-top: 5vh;
justify-content: center;
display: flex;
}
.title {
color: #543cc0 !important;
font-size: 40px;
font-weight: 500;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-top: 2vh;
}
p {
color: #646464;
}
.text {
font-size: 25px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.btn {
font-size: 25px !important;
margin: 5px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
border-radius: 7px;
}
.buildGuide {
margin-top: 10vh;
}
.intro .text {
margin: 3vh;
margin-left: 10vw;
margin-right: 10vw;
}
.carousel-item img {
display: block;
margin: 0 !important;
padding: 0 !important;
}
.modal-content .title {
margin: 0;
}
.intro .title {
font-family: 'Courier Prime', monospace;
}
.components {
margin-bottom: 15vh;
}
.left-arrow,
.right-arrow {
border-radius: 100%;
color: white;
background-color: #543cc0;
padding: 0;
margin: 5vh;
}
.left-arrow {
float: right;
}
.right-arrow {
float: left;
}
.carousel {
margin-bottom: 0;
padding-bottom: 0;
margin-top: 0;
padding-top: 0;
height: 30vh;
}
#floatIn {
opacity: 0;
transition: .5s ease-in-out;
margin-top: 20vh;
}
.builder-tool {
margin-top: 10vh;
}
.component {
border-color: #543cc0;
border-radius: 10px;
border-style: solid;
border-width: 2px;
transition: .3s ease-in-out;
}
.comp-text {
color: #543cc0;
font-size: 30px;
transition: .3s ease-in-out;
}
.comp-icon {
color: #543cc0;
transition: .3s ease-in-out;
}
.component:hover .comp-icon,
.component:hover .comp-text,
.component:hover {
color: #271675;
transition: .3s ease-in-out;
border-color: #271675;
}<!DOCTYPE html>
<html lang="en">
<head>
<!--CSS and meta tags-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PC Configurator | Home</title>
</head>
<body>
<!--Navbar-->
<nav>
<div class="nav-wrapper">
<a class="brand-logo">PCC</a>
</div>
</nav>
<div id="floatIn">
<!--Top text and buttons-->
<div class="row intro" id="topText">
<div class="col s12 m12 l12 center-align">
<img class="responsive-img" src="https://github.com/thejj26/SklapanjeRacunala/blob/main/zadnjiProjekt/resources/logo.png?raw=true">
<p class="text flow-text">PC Configurator is a webiste designed to make PC building easy and accessible to everyone. We have a selection of PC building guides and tools at your disposal. The best part - it's totally free!
</p>
<a class="btn deep-purple darken-4 waves-effect flow-text" id="pcBuilderBtn">PC Builder<i
class="material-icons right flow-text">build</i></a>
</div>
</div>
<!--Building guide-->
<div class="buildGuide row">
<div class="col s12 m12 l12 center-align">
<p class="title flow-text">Choosing the right components</p>
<p class="text flow-text">Choosing the right components for your brand new PC can be hard, especially if you know nothing about PCs. In this guide, we will show you all you need to know about PC components. Simply click on one of the components to learn about it.</p>
</div>
</div>
<!--Carousel-->
<div class="carousel components center-align">
<div class="carousel-item col s12 m6 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#cpuModal">
<img src="https://github.com/thejj26/SklapanjeRacunala/blob/main/zadnjiProjekt/resources/cpu.png?raw=true" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#gpuModal">
<img src="https://github.com/thejj26/SklapanjeRacunala/blob/main/zadnjiProjekt/resources/gpu.png?raw=true" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#mbModal">
<img src="https://github.com/thejj26/SklapanjeRacunala/blob/main/zadnjiProjekt/resources/mb.png?raw=true" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#ramModal">
<img src="https://github.com/thejj26/SklapanjeRacunala/blob/main/zadnjiProjekt/resources/ram.png?raw=true" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#storageModal">
<img src="https://github.com/thejj26/SklapanjeRacunala/blob/main/zadnjiProjekt/resources/storage.png?raw=true" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#psuModal">
<img src="https://github.com/thejj26/SklapanjeRacunala/blob/main/zadnjiProjekt/resources/psu.png?raw=true" class="responsive-img">
</a>
</div>
<div class="carousel-item col s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#caseModal">
<img src="https://github.com/thejj26/SklapanjeRacunala/blob/main/zadnjiProjekt/resources/case.png?raw=true" class="responsive-img">
</a>
</div>
<div class="carousel-item cl s12 m12 l3 center-align">
<a class="waves-effect waves-light modal-trigger title flow-text" href="#coolingModal">
<img src="https://github.com/thejj26/SklapanjeRacunala/blob/main/zadnjiProjekt/resources/cooling.png?raw=true" class="responsive-img">
</a>
</div>
</div>
<div class="row center-align">
<div class="col s6 m6 l6">
<i class="small material-icons flow-text center-align left-arrow" id="prev">keyboard_arrow_left</i>
</div>
<div class="col s6 m6 l6">
<i class="small material-icons flow-text center-align right-arrow" id="next">keyboard_arrow_right</i>
</div>
</div>
</div>
<!--Modals-->
<div>
<!--CPU-->
<div id="cpuModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Processor</p>
<p class="text flow-text">The processor, also know as the <b>CPU</b>, is the brain of your computer. It does all of the calculations and operations you throw at it. There are only two processor brands.
<b>Intel</b> and <b>AMD</b>. While both of them make good processors, Intel is better for gaming, while AMD is better for workstations. You should spend between 20% and 30% of your budget on your processor.
</p>
</div>
</div>
<!--GPU-->
<div id="gpuModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Graphics card</p>
<p class="text flow-text">The graphics card, also known as the <b>GPU</b>, is probably the most important component if you are want a gaming or workstation based PC. There are two graphics card chip makers:
<b>Nvidia</b> and <b>AMD</b>. There are also a lot of 3rd party brands that use those chips and just make the rest of the graphics card. Those are the ones you will most likely find, as the so-called
<b>"founder's edition"</b> graphics cards(that are entirely 1st party) are very rare. You should spend around 40% of your budget on your graphics card. Some processors have intergrated graphics, and don't need dedicated graphics cards. Those
processors have a <b>G</b> at the end of their name(AMD) or don't have <b>K</b>, <b>X</b> or <b>F</b> at the end of their name(Intel).</p>
</div>
</div>
<!--Motherboard-->
<div id="mbModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Motherboard</p>
<p class="text flow-text">The motherboard makes all of your components communicate. Every component is plugged into it. They all differ mainly by their <b>chipset</b> and <b>socket</b>. Depending on which CPU you have, you will need a different socket(<b>AM</b> for AMD
and <b>LGA</b> for Intel). It is recommended that you spend less than your CPU on your motherboard. For most users, the motherboard features don't even matter.</p>
</div>
</div>
<!--RAM-->
<div id="ramModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Memory</p>
<p class="text flow-text">Memory, also known as <b>RAM</b> is where all of your running apps are stored. Once you power off the computer, the memory get wiped clean. There are multiple aspects too look for when choosing memory.<br>
<b>Memory speed</b> measures how often your memory communicates with your CPU(measured in MHz). AMD CPUs benefit much more from higher memory speed. It is recommended to have a memory speed of 3000MHz or higher for AMD CPUs.<br> The <b>latency</b> or <b>CAS timing</b> is how much cycles it takes for your RAM to send data requested by the CPU. Generally, everything below <b>CL-20</b> is considered OK, and everything below
<b>CL-17</b> is considered fast.<br> The <b>number of memory sticks</b> affects your performance the most. It simply tells you how many sticks of RAM you are getting in the package. One is Ok for simple tasks, but having two or more significantly
increases performance, as long as you install them in <b>dual-channel mode</b>. The possible amount of ram sticks can be 1, 2, 4, 8, 16 and even 32. Most computers use 1-4 RAM sticks since that is what most motherboards support.<br> The <b>capacity</b> of your RAM simply tells you how much <b>GB</b> of RAM you are getting. 4GB is enough for very slight tasks, 8GB is enough for some gaming or every-day tasks, 16GB is OK for most games and workstation applications while 32GB+ is only used in
expensive beastly computers that can handle everything you throw at them.
</p>
</div>
</div>
<!--Storage-->
<div id="storageModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Storage</p>
<p class="text flow-text">The storage does what the name says - it stores all of your data, even when your PC is off. There are 3 types of storage: <b>SSD</b>, <b>HDD</b> and <b>hybrid</b> drives. SSDs are the fastes of them all by a lot. They don't have as much storage
as the other parts and cost more. HDDs are the slowest but they have the most storage and cost the least. Hybrid drives or SSHDs are a hybrid of the two. They are faster than HDDs but slower than SSDs but have more storage than SSDs. Their cost
is somewhere inbewteen the two. There are mulpitle for factor: <b>3.5"</b>(HDDs and SSHDs), <b>2.5"</b>(SSDs),
<b>M.2</b>(SSDs), and <b>PCIe</b>(SSDs).</p>
</div>
</div>
<!--PSU-->
<div id="psuModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Power supply</p>
<p class="text flow-text">The power supply, or the <b>PSU</b> is responsible for powering your system.
<b>Modular</b> PSUs have all the cables seperate, so you can only plug in the ones you need.
<b>Non-modular</b> PSUs have all the cables attached. It is important not to cheap out on your PSU and only buy from trusted brands. Those brands are: <b>Corsair</b>, <b>Coolermaster</b>,
<b>Asus</b>,
<b>Gigabyte</b>, <b>Silverstone</b>, <b>be quiet!</b>, <b>Phanteks</b>, <b>Thermaltake</b>,
<b>Seasonic</b> and <b>Fractal Design</b>. You should always get a PSU with more wattage than you need. For example, if your system uses 400W you should get a 550W PSU. Better PSUs also have power ratings. These tell you how good their power
efficiency is. They start with <b>80+</b> and go all the way up to
<b>80+ Platinum</b>.</p>
</div>
</div>
<!--Case-->
<div id="caseModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Case</p>
<p class="text flow-text">The case houses all of your components. The only performance factor of cases is their airloflow. Some come with preinstalled fans, more intake space and much more. The case is often the cheapest part of any PC.</p>
</div>
</div>
<!--Cooling-->
<div id="coolingModal" class="modal">
<div class="modal-content">
<p class="title flow-text">Cooling</p>
<p class="text flow-text">Most of your components need cooling. Some of them, like the CPU, GPU and PSU usually come with one or more fans. But sometimes that is not enough, especially for more powerful hardware. There are 3 types of coolers. <br><b>CPU coolers</b> cool
the CPU. They can be water coolers or air coolers.<br><b>GPU coolers</b> cool the GPU. Most GPUs come with excelent air-cooling but you can step it up further with a custom water cooler.<br><b>Case
coolers</b> or <b>case fans</b> are as they sound - fans that are mounted inside the case and help with the intake of cold air and with the exhaust of hot air.</p>
</div>
</div>
<div class="builder-tool center-align">
<p class="title flow-text center-align">PC Builder tool</p>
<p class="text flow-text center-align" id="builder">The PC Builder tool allows you to build your own PC with a variety of parts. After you have finished picking out all of the components, the tools rates your PC build and estimates its' performance in multiple categories. Not for you? No need to
worry! With our Auto Builder tool, you will have a custom build made just for you. Simply select your budget and use case and it should be assembled for you.</p>
<div class="row center-align">
<div class="component col s6 m4 l2 center-align" id="c-cpu">
<p class="comp-text center-align flow-text">CPU</p>
<i class="material-icons comp-icon medium">add_circle</i>
</div>
<div class="component col s6 m4 l2 center-align" id="c-cooler1">
<p class="comp-text center-align flow-text">CPU-cooler</p>
<i class="material-icons comp-icon medium">add_circle</i>
</div>
<div class="component col s6 m4 l2 center-align" id="c-mb">
<p class="comp-text center-align flow-text">Motherboard</p>
<i class="material-icons comp-icon medium">add_circle</i>
</div>
<div class="component col s6 m4 l2 center-align" id="c-ram">
<p class="comp-text center-align flow-text">RAM</p>
<i class="material-icons comp-icon medium">add_circle</i>
</div>
<div class="component col s6 m4 l2 center-align" id="c-gpu">
<p class="comp-text center-align flow-text">GPU</p>
<i class="material-icons comp-icon medium">add_circle</i>
</div>
<div class="component col s6 m4 l2 center-align" id="c-storage">
<p class="comp-text center-align flow-text">Storage</p>
<i class="material-icons comp-icon medium">add_circle</i>
</div>
<div class="component col s6 m4 l2 center-align" id="c-psu">
<p class="comp-text center-align flow-text">PSU</p>
<i class="material-icons comp-icon medium">add_circle</i>
</div>
<div class="component col s6 m4 l2 center-align" id="c-case">
<p class="comp-text center-align flow-text">Case</p>
<i class="material-icons comp-icon medium">add_circle</i>
</div>
<div class="component col s6 m4 l2 center-align" id="c-cooler2">
<p class="comp-text center-align flow-text">Additional Cooling</p>
<i class="material-icons comp-icon medium">add_circle</i>
</div>
</div>
</div>
</div>
<!--Scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="main.js"></script>
</html>
1条答案
按热度按时间iezvtpos1#
我希望我回答对了你的问题。如果你说的是
.component类，那么简单的css就可以了。您可以将
margin: 20%;添加到component如果这不适合窗口侧，请尝试将
margin-left: 20%; margin-right: 20%;添加到父容器。