我有一个设计，我正在按照它来创建我的前端。我在分隔 div 时遇到困难。
我的设计是这样的:
我正在尝试以 Angular 创建相同的内容
代码
<div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="12px" class="side_start">
<div fxFlex="12" class="second_bar">
Side
</div>
<div fxFlex="88" fxLayout="column" fxLayoutAlign="space-bewteen" fxLayoutGap="12px">
<div ngClass=third_bar_1>
<div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="12px">
<div fxFlex="8" class="zone">
Zone Thermal Comfort
</div>
<div fxFlex="5" class="temp">
<p>TEMP</p>
<p>37 deg</p>
</div>
</div>
</div>
<div class=third_bar_2>
second
</div>
</div>
</div>
.css
.third_bar_1{
border:1px solid red;
background-color: white;
height: 60px;
}
.zone {
/* font-color: #5d6d88; */
background-color: #f1cd86;
text-align: center;
height: 71%;
}
.temp {
background-color: #73d9fa
}
.third_bar_2{
border:1px solid red;
height: calc(100vh - 355px);
}
它看起来像:
如何创建图像中显示的具有不同水平和垂直 div 的 div。
最佳答案
如果您尝试使用纯 CSS 来做到这一点，那将有点困难。你可以使用 bootstrap 来完成它，它是 css frmaework 非常容易。只需阅读一些关于引导网格系统的教程，您就可以轻松地做到这一点。这是一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Grid</h1>
<p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-sm-6" style="background-color:pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
</div>
</div>
</div>
</body>
</html>
关于html - 将div并排放置在列中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57544781/