我正在尝试使用 Html Css(Bootstrap) 和 php lavarel 作为后端创建一个帐户仪表板。 我的想法是创建一行三列并将内容放在三列内。 这是 HTML:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pop</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<style>
html{
background: #01ACAD;
}
.container{
background-color: white;
width: 95%;
height: auto;
position: relative;
left: 40px;
top: 15px;
}
.row{
background:;
padding: 22.875rem;
margin: 6.188rem;
margin-left: 134px;
position: relative
}
.col-6 {
float: left;
width:30%;
background: grey;
}
</style>
</head>
<body class="container">
<div class="row">
<div class="col-6 .col-md-4">
<h2>LOGO</h2>
</div>
<div class="col-6 .col-md-4">
<h2>LOGO</h2>
</div>
<div class="col-6 .col-md-4">
<h2>LOGO</h2>
</div>
</div>
</body>
</html>
它是这样的:
这就是我想要的:
如有任何回复，我将不胜感激。
最佳答案
请引用以下代码片段:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Three Equal Columns</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
Logo
</div>
<div class="column" style="background-color:#bbb;">
Logo
</div>
<div class="column" style="background-color:#ccc;">
Logo
</div>
</div>
</body>
</html>关于html - 如何将 3 列全尺寸排成一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69055749/