HTML和CSS：无法正确对齐DIV
请查看以下代码。
的index.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"/>
<style type="text/css">
<!--
#apDiv1 {
position:relative;
left:750px;
top:190px;
width:444px;
height:43px;
z-index:0;
}
-->
</style>
</head>
<body>
<div id="apDiv1"><img src="images/only_text.gif"></div>
<div class="main">
<!------------------------ start menu bar ------------------------->
<!-- end menu_bar -->
<!------------------------ start body_container ------------------------->
<div class="body_container2">
<!------------------------ start block_left ------------------------->
<div class="block_left4" >
<div class="logo_container">
<div align="left"><img src="images/only_spiral.gif"></div>
</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>Navigation</h3>
<ul>
<a href="">
<li>Main Page</li>
</a> <a href="">
<li>About us</li>
</a> <a href="">
<li>Video Samples</li>
</a> <a href="">
<li>Packages</li>
<li>Faqs</li>
<li>Contact Us</li>
</a>
</ul>
<hr align="center" width="100%" color="#CCCCCC"/>
<ul>
<a href=""> </a><a href=""> </a>
</ul>
</div>
<!-- end block1 -->
<!------------------------ start block2 ------------------------->
<div class="block2_1">
<div class="presentation_container">
<embed width="590" height="auto" src="test.swf" >
</embed >
</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"></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_container2 {
margin-left: auto;
margin-right: auto;
padding: 00px 20px 0px 20px;
width: 960px;
height: auto;
overflow: auto;
}
/*******************************/
.block_left4 {
float: left;
width: 250px;
padding: 10px 10px 0px 10px;
height: auto;
overflow: auto;
text-align: center;
}
.logo_container {
height: auto;
width: auto;
overflow: auto;
}
/*******************************/
.video_container2 {
margin-top: 70px;
margin-left:50px;
width: 550px;
float:left;
height: 350px;
padding: 20px;
position:absolute;
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: 650px;
top: 194px;
overflow:hidden;
}
.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;
}
/*******************************/
.presentation_container {
float: right;
width: 590px;
padding-top: 20px;
padding-bottom: 20px;
overflow: auto;
height: auto;
}
/*******************************/
.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_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);
}
.block2_1 {
float:left;
width: 50%;
padding: 20px;
overflow: auto;
height: auto;
background-color: #FFF;
font-family: 'Lato', sans-serif;
}
/*******************************/
.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;
}
我的上述代码生成以下网页。
您可以看到视频容器及其上方的徽标（当发布到SO时，我通过使用黑色绘画来删除徽标;因此徽标位于视频上方，这就是您所看到的黑色右侧的框不对齐。如果有人放大或缩小网页，情况会更糟，因为视频容器和徽标越来越不对齐。
请看下面的图片。
上图显示了我的期望。视频和徽标已正确对齐，如果网页放大或缩小，它们不会失去对齐。
包含徽标的DIV名称为apDiv1，您可以在HTML代码的第24行找到它。包含视频的DIV名称全部为video_container2，您可以在第40行找到它。
那么如何解决这种对齐问题？
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？