放大时DIV定位问题
请查看以下代码
Index5.html
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css"/>
<link href="styles/cssmenu/menu_source/styles.css" rel="stylesheet" type="text/css"/>
<link href="styles/cssmenu2/cssmenu/menu_source/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="main">
<!------------------------ start menu bar ------------------------->
<div class="menu_bar">
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>MAIN PAGE</span></a></li>
<li><a href='#'><span>ABOUT US</span></a></li>
<li><a href='#'><span>VIDEO SAMPLES</span></a></li>
<li><a href='#'><span>PACKAGES</span></a></li>
<li><a href='#'><span>FAQS</span></a></li>
<li class='last'><a href='#'><span>CONTACTS</span></a></li>
</ul>
</div>
</div>
<!-- end menu_bar -->
<!------------------------ start body_container ------------------------->
<div class="body_container2">
<!------------------------ start block_left ------------------------->
<div class="block_left4" >
<div class="logo_container"><img src="images/LOGO4.gif" width="740" height="638"/></div>
</div>
<!-- end block_left -->
<!------------------------ start video_container ------------------------->
<div class="video_container2">
<!------------------------ start video ------------------------->
<div class="video1">
<video id="example_video_1" class="video-js vjs-default-skin" width="550" height="300" data-setup="{}" poster="http://video-js.zencoder.com/oceans-clip.png" preload="none" controls>
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4"></source>
<source type="video/webm" src="http://video-js.zencoder.com/oceans-clip.webm"></source>
<source type="video/ogg" src="http://video-js.zencoder.com/oceans-clip.ogv"></source>
<track label="English" srclang="en" src="demo.captions.vtt" kind="captions"></track>
<!--Tracks need an ending tag thanks to IE9 -->
<track label="English" srclang="en" src="demo.captions.vtt" kind="subtitles"></track>
<!--Tracks need an ending tag thanks to IE9 -->
</video>
</div>
<!-- end video -->
<!------------------------ start div_bottom_video ------------------------->
<div class="div_bottom_video"> <a href=""><span id="last2">Menu</span></a> <a href=""><span>Sound</span></a> <a href=""><span>Mail</span></a></div>
<!-- end div_bottom_video -->
</div>
<!-- end video_container -->
<!------------------------ start presentation_container ------------------------->
<!-- end presentation_container -->
<!------------------------ start block_container ------------------------->
<div class="block_container3">
<!------------------------ start block1 ------------------------->
<div class="block1_1">
<h3>PRICES</h3>
<ul>
<a href="">
<li>Cicerd</li>
</a> <a href="">
<li>Cicero (en)</li>
</a> <a href="">
<li>Li Europan lingues</li>
</a> <a href="">
<li>beatae vitae </li>
</a>
</ul>
<hr align="center" width="100%" color="#CCCCCC"/>
<ul>
<a href="">
<li>Neque porro quisquam</li>
</a> <a href="">
<li>voluptas nulla </li>
</a> <a href="">
<li>placeat facere</li>
</a> <a href="">
<li>laboriosam</li>
</a> <a href="">
<li>dolorem</li>
</a> <a href="">
<li>omnis iste</li>
</a> <a href="">
<li>fugit</li>
</a>
</ul>
</div>
<!-- end block1 -->
<!------------------------ start block2 ------------------------->
<div class="block2_1">
<h3>WHO WE ARE</h3>
<div class="image_box"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim. </p>
<div class="link"><a href="">Click here</a></div>
</div>
<!-- end block2 -->
</div>
<!-- end block_container -->
</div>
<!-- end body_container -->
<!------------------------ start footer ------------------------->
<div class="footer">
<div id='cssmenu2'>
<ul>
<li class='active'><a href='index.html'><span>Main Page</span></a></li>
<li><a href='#'><span>About Us</span></a></li>
<li><a href='#'><span>Video Samples</span></a></li>
<li><a href='#'><span>Packages</span></a></li>
<li><a href='#'><span>Faqs</span></a></li>
<li id='last'><a href='#'><span id="last">Contacts</span></a></li>
</ul>
</div>
<p><span id="format">DIETBYDNA</span> @ 2008 <a href="">privacy policy</a></p>
</div>
<!-- end footer -->
</div>
</body>
</html>
styles.css的
@charset "utf-8";
/* CSS Document */
/* styles on index.html */
h3 {
color: #609;
}
.main {
margin-left: auto;
margin-right: auto;
height: auto;
overflow: auto;
width: 1000px;
background-image: url(../images/background6.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.menu_bar {
text-align: center;
height: 40px;
width: 900px;
padding: 0px 50px 10px 50px;
margin-left: auto;
margin-right: auto;
background-color: rgba(255,255,255,0.5);
-webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
}
.body_container {
margin-left: auto;
margin-right: auto;
padding: 30px 20px 0px 20px;
width: 960px;
height: auto;
overflow: auto;
}
.body_container2 {
margin-left: auto;
margin-right: auto;
padding: 00px 20px 0px 20px;
width: 960px;
height: auto;
overflow: auto;
}
/*******************************/
.block_left {
margin-top: 70px;
float: left;
width: 300px;
padding: 10px 10px 0px 10px;
height: auto;
overflow: auto;
text-align: center;
}
.block_left1 {
float: left;
width: 300px;
padding: 10px 10px 0px 10px;
height: auto;
overflow: auto;
text-align: center;
}
.block_left2 {
float: left;
width: 400px;
padding: 10px 10px 0px 10px;
height: auto;
overflow: auto;
text-align: center;
}
.block_left3 {
float: left;
width: 350px;
padding: 10px 10px 0px 10px;
height: auto;
overflow: auto;
text-align: center;
}
.block_left4 {
float: left;
width: 740px;
padding: 10px 10px 0px 10px;
height: auto;
overflow: auto;
text-align: center;
}
.logo_container {
height: auto;
width: auto;
overflow: auto;
}
/*******************************/
.video_container {
margin-top: 70px;
float: right;
width: 550px;
height: 340px;
padding: 20px;
overflow: auto;
background-color: #FFF;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
}
.video_container1 {
margin-top: 70px;
float: right;
width: 500px;
height: 350px;
padding: 20px;
overflow: auto;
background-color: #FFF;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
}
.video_container2 {
margin-top: 70px;
float: right;
width: 550px;
height: 350px;
padding: 20px;
position:absolute;
overflow: auto;
background-color: #FFF;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
left: 327px;
top: 194px;
}
.video {
width: 550px;
height: 300px;
border: solid thin #999;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align: center;
background-color: #666;
}
.video1 {
width: 550px;
height: 300px;
border: solid thin #999;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align: center;
background-color: #666;
}
.example_video_1 {
position: absolute;
z-index: -1;
}
.div_bottom_video {
width: 100%;
height: auto;
}
.div_bottom_video span {
float: right;
font-family: 'Lato', sans-serif;
padding-right: 15px;
padding-left: 15px;
margin-top: 15px;
border-right: #CCC thin solid;
color: #609;
}
.div_bottom_video #last {
border-right: none;
}
.div_bottom_video img {
padding-left: 5px;
}
.div_bottom_video a {
text-decoration: none;
}
.div_bottom_video a:hover {
text-decoration: underline;
}
/*******************************/
.presentation_container {
float: right;
width: 590px;
padding-top: 20px;
padding-bottom: 20px;
overflow: auto;
height: auto;
}
.presentation_container1 {
float: right;
width: 500px;
padding-top: 20px;
padding-bottom: 20px;
overflow: auto;
height: auto;
}
.presentation_container2 {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
float: right;
clear: right;
padding-top: 20px;
padding-bottom: 20px;
width: 550px;
height: auto;
overflow: auto;
}
.presentation_container3 {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
float: right;
clear: right;
padding-top: 20px;
padding-bottom: 20px;
width: 550px;
height: auto;
overflow: auto;
position:absolute;
left: 500px;
top: 679px;
}
/*******************************/
.block_container {
background-color: #666;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
float: right;
clear: right;
padding-left: 20px;
padding-right: 20px;
width: 550px;
height: auto;
background-color: #FFF;
overflow: auto;
-webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
}
.block_container1 {
background-color: #666;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
float: right;
clear: right;
padding-left: 20px;
padding-right: 20px;
width: 500px;
height: auto;
background-color: #FFF;
overflow: auto;
-webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
}
.block_container2 {
background-color: #666;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
float: right;
clear: right;
padding-left: 20px;
padding-right: 20px;
width: 550px;
height: auto;
background-color: #FFF;
overflow: auto;
-webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
}
.block_container3 {
background-color: #666;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
float: right;
clear:both;
padding-left: 20px;
padding-right: 20px;
width: 100%;
height: auto;
background-color: #FFF;
overflow: auto;
-webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
}
.block1 {
float: right;
width: 235px;
padding: 20px;
overflow: auto;
height: auto;
background-color: #FFF;
clear: both;
font-family: 'Lato', sans-serif;
}
.block1_1 {
float: right;
width: 40%;
padding: 20px;
overflow: auto;
height: auto;
background-color: #FFF;
clear: both;
font-family: 'Lato', sans-serif;
}
.block1 li {
padding: 5px 0px 5px 0px;
}
.block1 a {
color: #000;
font-size: 14px;
list-style: url(../images/bullet.png);
}
.block1 a:hover {
color: #036;
}
.block2 {
float: right;
width: 235px;
padding: 20px;
overflow: auto;
height: auto;
background-color: #FFF;
font-family: 'Lato', sans-serif;
}
.block2_1 {
float:left;
width: 50%;
padding: 20px;
overflow: auto;
height: auto;
background-color: #FFF;
font-family: 'Lato', sans-serif;
}
.image_box {
background-image: url(../images/image4.jpg);
background-repeat: no-repeat;
background-size: cover;
border: solid #333 thin;
height: 150px;
width: 100%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/*******************************/
.footer {
height: 80px;
width: 900px;
padding: 20px 50px 20px 50px;
background-color: #FFF;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75);
}
.footer p {
font-family: 'Lato', sans-serif;
text-align: center;
font-size: 12px;
}
.footer a {
color: #333;
}
.footer #format {
color: #09F;
font-size: 14px;
}
/*******************************/
.link {
display: -moz-inline-stack;
display: inline-block;
width: 91px;
height: 28px;
background: url("http://dabuttonfactory.com/b.png?t=click%20here&f=Calibri&ts=15&tc=ffffff00&tshs=1&tshc=22222200&it=png&c=7&bgt=gradient&bgc=a27de3&ebgc=471870&be=on&hp=17&vp=9") no-repeat;
line-height: 28px;
vertical-align: text-middle;
text-align: center;
font-family: Calibri;
font-size: 15px;
font-weight: normal;
font-style: normal;
text-shadow: #222222 1px 1px 0;
}
.link a {
text-decoration: none;
color: #ffffff;
}
.link a:hover {
color: #CCC;
}
此代码生成以下网页。
正如您所看到的，视频容器定位不好，部分位于页面外部！我还注意到，当我放大或缩小时，视频容器的位置会发生变化！
我需要靠近左侧徽标的视频容器，当我放大或放大时，它不应该在这里和那里移动。视频容器以下面的代码
开头 <!------------------------ start video_container ------------------------->
<div class="video_container2">
如何实现这一目标？
3 个答案:
答案 0 :(得分：0)
您可以使用Bootstrap及其＆＃34; col＆＃34;而不是指定容器的固定宽度。让它反应灵敏的课程
答案 1 :(得分：0)
在您的css班.videocontainer2中，您添加了float:right，这就是为什么它位于右侧。因此，请添加margin-right://value in pix属性保留float:right或添加margin-left://value in pix属性并移除float:right。
要确保div标记的位置固定，可以在css类position:fixed中添加.videocontainer2属性
答案 2 :(得分：0)
你的'.videocontainer2'有'position：absolute'和'float：right'..这是定位元素的两种不同方式..
我不打算跟踪你所有的定位规则，但试试这个：
.video_container2 {
margin-top: 70px;
float: left;
width: 550px;
height: 350px;
padding: 20px;
overflow: auto;
background-color: #FFF;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
}
注意我已删除了'绝对'定位，并将'浮动'更改为'左';
如果你有一个指向你网页的链接，那么比帮助你更容易。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？