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

Css - Is it possible to make an element move when screen being resized in order to make it fit the screen

本文关键字：屏幕 移动 元素 是否 调整 Css- 小时      更新时间：2024-06-19

这是代码链接到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>

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

我的意思是，当前的状态是画布元素位于屏幕的右侧，我希望避免这种情况。

因此，感谢的任何帮助

您可以使用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;  
}

并从CCD_ 5标签中移除CCD_

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

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

不要使用px，而是使用em或%使布局响应。

如果将canvas和<ul>都放在一个容器中，如果没有足够的空间容纳它们，则可以将它们移到CCD_7下方。

HTML:

 <div class='col'>    
        <ul>
            ...
        </ul>
    </div>
    <div class='col'>
        <div class="can_con">
            <canvas ...></canvas>
        </div>
    </div>

CSS：

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

Fiddle：http://jsfiddle.net/7pt6uw53/5/

相关文章：