Question

这是代码的链接 - link to jsfiddle

以及代码 -

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>


    <style>
        .can_con {
            border: 1px solid #b6ff00;
            position: absolute;
            top: 25px;
            left: 600px;

        }

        li {
            font-size: 60px;

        }         

    </style>
</head>
<body>

    <ul>
        <li>Some Text 1</li>
        <li>Some Text 2</li>
        <li>Some Text 3</li>
    </ul>

    <div class="can_con">
        <canvas id="#myCan" width="600" height="200" style="border:1px solid #f00;"></canvas>
    </div>


</body>
</html>

现在我想知道的是，当屏幕放大时，是否有一种方法可以使画布元素不会消失。

我的意思是当前状态是画布元素到达屏幕的右侧，我想避免这种情况。

非常感谢任何帮助

Answer 1

您可以使用float和box-sizing

.can_con {
    width:50%;
    float:right;
    box-sizing: border-box;
}
.can_con canvas{
    width:100%;
    display:block
}
ul {
    width:50%;
    float:left;
    box-sizing: border-box;
}
li {
    font-size: 60px;  
}

并从width代码

中删除height和<canvas>

<canvas id="#myCan" style="border:1px solid #f00;"></canvas>

更新了小提琴：http://jsfiddle.net/7pt6uw53/4/

Answer 2

不使用 px ，而是使用 em 或％来使布局响应。

Answer 3

如果你将canvas放在一个容器中，如果没有足够的空间放在左边，你可以将<ul>移到<div class='col'> <ul> ... </ul> </div> <div class='col'> <div class="can_con"> <canvas ...></canvas> </div> </div>之下。

HTML：

.col{
    float:left;
}
.col:last-of-type:after{
    content:"";
    display:table;
    clear:both;
}

CSS：

{{1}}

小提琴： http://jsfiddle.net/7pt6uw53/5/

Css - 是否可以在调整屏幕大小时使元素移动以使其适合屏幕

3 个答案:

HTML：

CSS：