下面的片段显示了我的页面设计的一部分。要求是:
img和canvas元素的大小始终成比例并且 相对于彼此的位置不变。他们需要 看起来彼此依恋。- 在常规尺寸的笔记本电脑/台式机屏幕上，
img的宽度应约为 300 像素，文本应显示在旁边。不在下面。 - 在较小的屏幕上，文本可以下降到下方或图像可以缩小。
- 容器元素(
T2和C2)需要实际包含其中的元素。例如，如果我使用float属性，则我的p、canvas和img元素的底部在下方C2元素的底部。它不起作用。 p元素中的文本数量可能会发生变化。因此，容器元素(T2和C2)的高度需要灵活，无需重新编码。
我尝试了两种方法:
- 所有内容的绝对定位和一个非常复杂的脚本，它根据窗口大小或窗口大小的变化来调整大小和移动内容。
- 以下。容器元素的相对定位，以启用其中的
img和canvas元素的绝对定位。p文本的默认定位，带边距以适应img和canvas。Min-height用于p文本以阻止容器高度低于img+canvas高度。
我的目标是在不使用插件/库或第 3 方代码的情况下实现简单性和最佳实践。 下面看起来我已经做到了吗？如果没有，请提出建议？(也许是一些用于微调的 javascript)
如果我要考虑一个免费且公开可用的 CSS 或 javascript 库或插件，目前最好的是什么？看起来引导网格系统将是我的第一个停靠点。 p>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "10px Arial";
ctx.fillText("Canvas with fixed height and width. Absolute positioning.",10,50);.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
position:relative;
}
#img1 {
border: 1px solid green;
position: absolute;
right: 0px;
top:80px;
height: 200px;
width: 200px;
margin: 0px;
padding: 0px;
z-index:10;
}
#canvas {
border: 1px solid blue;
position: absolute;
right: 125px;
top:30px;
height: 150px;
width: 150px;
margin: 0px;
padding: 0px;
z-index:9;
}
#text {
border:1px solid purple;
width:50%;
max-width:500px;
min-height:400px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="template" id="T2">
<div class="chapter" id="C2">
<p>Parent element with relative positioning. Needs to contain text box, canvas and image.</p>
<img src="" id="img1" alt="Image with fixed height and width. Absolute positioning." />
<canvas id="canvas"></canvas>
<div id="text"><p>Text box with minimum height greater than img + canvas height.</p>
</div>
</div>
</div>
</body>
</html>最佳答案
您可以在容器上使用display:flex 来控制两个子容器imgCanvasContainer 和text。当屏幕较小时，文字会落在下方。可以使用@media 查询进一步控制元素尺寸，如下所示:
@media screen and (max-width: 700px) {
#text {
width:100% !important;
}
}
这是一个片段:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "10px Arial";
ctx.fillText("Canvas with fixed height and width. Absolute positioning.",10,50);@media screen and (max-width: 700px) {
#text {
width:100% !important;
}
}
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: absolute;
right: 0px;
top:80px;
height: 200px;
width: 200px;
margin: 0px;
padding: 0px;
z-index:10;
}
#canvas {
border: 1px solid blue;
position: absolute;
right: 125px;
top:30px;
height: 150px;
width: 150px;
margin: 0px;
padding: 0px;
z-index:9;
}
.imgCanvasContainer {
position:relative;
width:300px;
height:300px;
align-self: start;
}
.flexContainer {
display:flex;
flex-wrap:wrap-reverse;
}
#text {
border:1px solid purple;
width:50%;
max-width:500px;
min-height:400px;
}<div class="template" id="T2">
<div class="chapter" id="C2">
<p>Parent element with relative positioning. Needs to contain text box, canvas and image.</p>
<div class="flexContainer">
<div id="text"><p>Text box with minimum height greater than img + canvas height.</p>
</div>
<div class="imgCanvasContainer">
<img src="" id="img1" alt="Image with fixed height and width. Absolute positioning." />
<canvas id="canvas"></canvas>
</div>
</div>
</div>
</div>关于html - 响应式设计 : Elements with fixed size & fixed position relative to each other. 文字环绕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46077164/