0
我想排列一个完美的图像和视频彼此相邻。但由于某些原因，它们的尺寸不尽相同，即使它们都是720x1280，也不排列。如何让图像和视频完美排列？
我怎样才能得到这些排队完美？
的Html
<!doctype html>
<html>
<head>
<title> Håvard Bø </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- menu -->
<div class="menuflex" id="menuBar">
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">Sites</a>
<ul>
<li> <a target="_blank" href="test/test.html">Test </a></li>
<li> <a target="_blank" href="slider/norsk natur.html">First Slider</a></li>
<li> <a target="_blank" href="TRIPOLOSKI/tri.html">TRIPOLOSKI</a></li>
<li> <a target="_blank" href="#"> Next Project </a></li>
</ul>
</li>
<li> <a href="#">Contact</a>
<ul>
<li> <a href="#">Contact Håvard</a></li>
<li> <a href="#">His company</a></li>
</ul>
</li>
<li> <a href="#">Social media</a>
<ul>
<li> <a target="_blank" href="https://www.facebook.com/havardsnowboard">Facebook</a></li>
<li> <a target="_blank" href="https://twitter.com/TwintipzZ">Twitter</a></li>
<li> <a target="_blank" href="https://youtu.be/84K2ple-pF0">Youtube</a></li>
<li> <a target="_blank" href="https://www.twitch.tv/twintipzz/">Twitch</a></li>
</ul>
</li>
</ul>
</div>
<!-- end of menu -->
<br>
<br>
<div class="imgAndVid">
<img class="frontPagePics" src="1.jpg" height="auto" width="48%"/>
<img class="frontPagePics" src="2.jpg" height="auto" width="48%"/>
<img class="frontPagePics" src="3.jpg" height="auto" width="48%"/>
<video autoplay muted loop width="48%" height="auto">
<source src="4.mp4" type="video/mp4">
</div>
<div class="about">
<h2> About me </h2>
Hello, my name is Håvard Bø. I am 17 years old and I live in Oslo the capital of Norway.
I previously went to Skøyenåsen junior High school. Now I am studying at Akademiet High School.
I am currently taking the courses required to be and engineer, but i also take
other courses like IT, where i learn to code html5.
I live in a big house with my mother, father and my brother.
<br><br>
<table>
<tr>
<th> Navn </th>
<th> Grønnsak </th>
<th> Størrelse </th>
<th> Kalorier </th>
</tr>
<tr>
<td> potet 1 </td>
<td> potet </td>
<td> 6 potetmeter </td>
<td> 4 gj </td>
</tr>
<tr>
<td> potet 1 </td>
<td> potet </td>
<td> 7 potetmeter </td>
<td> 5 gj </td>
<br><br><br><br> hei
</div>
<script>
/* slider script start */
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("frontPagePics");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 3000);
}
/* slider script end */
/* Menubar start */
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var topbarME = function() { $('#menuBar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add events
topbarML();
$('#menuBar').bind('mouseenter',topbarME);
$('#menubar').bind('mouseleave',topbarML);
inside = true;
}
else if (position < topDistance){
topbarME();
$('#menubar').unbind('mouseenter',topbarME);
$('#menubar').unbind('mouseleave',topbarML);
inside = false;
}
});
})();
});
/* Menubar end */
</script>
</body>
</html>
CSS
@charset "utf-9";
body {
background: url("main_background.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Impact", charcoal,sans-serif;
font-size: 18px;
color: #323232;
}
.imgAndVid {
display: inline;
}
.about {
color: lightgrey;
}
ul {
margin: 0px;
padding: 0px;
position: static fixed;
}
ul li {
background-color: black;
opacity: 0.85;
border: 1px solid white;
width: 135px;
height: 25px;
line-height: 25px;
float:left;
text-align: center;
list-style: none;
}
ul li a{
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
background-color: dimgrey;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
img {
padding: 5px;
top: 50px;
left: 10px;
}
video {
padding: 5px;
position: absolute;
top: 50px;
right: 10px;
}
#menuBar {
background: url("main_background.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.95;
padding:10px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
table {
margin-left: 20px;
border-collapse: collapse;
width: 60%;
min-width: 600px;
height: 40%;
}
th {
width: 250px;
background-color: deeppink;
border: 1px solid black;
padding: 5px;
text-align: center;
size: 25px;
}
td {
background-color:lightpink;
border: 1px solid black;
padding: 5px;
text-align: center;
size: 20px;
}
'img'不是'的位置是：绝对的;'。 '位置：亲戚;'父母。此外，这将是在同一地点。 – PHPglue