Question

下面的代码段显示了我的网页设计的一部分。要求是：

img和canvas元素，其大小始终与之成比例相对于彼此的位置不会改变。他们需要相互依附。
在普通尺寸的笔记本电脑/台式机屏幕上，img应大约为300像素宽，文字应显示在旁边。不在下面。
在较小的屏幕上，文字可以下方或图像缩小。
容器元素（T2和C2）需要实际包含其中的元素。例如，如果我使用float属性，则p，canvas和img元素的底部位于C2元素的底部。它不起作用。
p元素中的文字数量可能会发生变化。因此，容器元素（T2和C2）的高度需要灵活，无需重新编码。

我尝试了两种方法：

绝对定位所有内容和非常复杂的脚本，根据窗口大小或窗口大小的变化重新调整大小和移动内容。
以下。容器元素的相对定位，以实现img和canvas元素的绝对定位。 p文字的默认定位，包含余量以容纳img和canvas。 Min-height文字的p可以阻止容器高度低于img + canvas高度。

我的目标是简单和最佳实践，而无需使用插件/库或第三方代码。 以下看起来我已经实现了这个目标吗？如果没有，请提出建议吗？（可能是一些用于微调的javascript）

如果我要考虑一个免费且公开的CSS或javascript库或插件，那么现在最好的是什么？看起来bootstrap网格系统将是我的第一个停靠点。

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>

Answer 1

您可以在容器上使用display:flex来控制两个子容器imgCanvasContainer和text中的每一个。当屏幕较小时，文本将落在下面。使用@media查询可以实现元素维度的进一步控制，如下所示：

@media screen and (max-width: 700px) {
    #text {
        width:100% !important;
    }
}

这是一个片段：

＆＃13;

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);

＆＃13;

@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;
  }

＆＃13;

<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>

＆＃13;

响应式设计：固定尺寸和尺寸的元素;固定位置相对于彼此。与

1 个答案: