CSS-在調整屏幕大小以使其適合屏幕時是否可以使元素移動
[英]Css - Is it possible to make an element move when screen being resized in order to make it fit the screen
問題描述
這是代碼的鏈接- 鏈接到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>
現在我想知道的是，是否有一種方法可以使放大屏幕時畫布元素不會消失。
我的意思是當前狀態是canvas元素位於屏幕的右側，我想避免這種情況。
因此，感謝您的任何幫助
3 個解決方案
解決方案1
1 已采納 2015-02-26 10:23:36
您可以使用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;
}
並從<canvas>標記中刪除width和height
<canvas id="#myCan" style="border:1px solid #f00;"></canvas>
更新的提琴： http : //jsfiddle.net/7pt6uw53/4/
解決方案2
0 2015-02-26 10:27:19
不要使用px，而要使用em或％來使布局響應。
解決方案3
0 2015-02-26 10:59:15
如果您將canvas都放在<ul>則可以將其移動到容器中；如果容器中沒有足夠的空間，則可以將其浮動到左側。
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;
}
小提琴： http : //jsfiddle.net/7pt6uw53/5/
如何使元素適合屏幕？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.