Question

我希望将图像和视频完美地排列在一起。但是由于某些原因，它们的大小不同，即使它们都是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;
}

Answer 1

当你说阵容时，你想让它们与上边缘，下边缘或中心对齐吗？请参阅下面的代码（单击完整页面查看全部，控制台阻止Flexbox示例）

h1 {
 font-size:20px;
  margin:20px 0;
}
.item {
    display:inline-block;
    margin:10px;
}

.item2 {
   display:block;
  margin:10px;
  float:left;
}  
.clear {clear:both;float:none;}

.container {
  display:flex;
  align-items:center
}

<h1>Inline-block</h1>
<img class="item" src="http://placehold.it/20x15" />
<img class="item" src="http://placehold.it/20x25" />
<img class="item" src="http://placehold.it/20x10" />
<img class="item" src="http://placehold.it/20x15" />

<h1>Float</h1>
<img class="item2" src="http://placehold.it/20x15" />
<img class="item2" src="http://placehold.it/20x25" />
<img class="item2" src="http://placehold.it/20x10" />
<img class="item2" src="http://placehold.it/20x15" />
<div class="clear"></div>

<h1>Flexbox</h1>
<div class="container">
<img class="item3" src="http://placehold.it/20x15" />
<img class="item3" src="http://placehold.it/20x25" />
<img class="item3" src="http://placehold.it/20x10" />
<img class="item3" src="http://placehold.it/20x15" />
</div>

如何让图像和视频完美排列？

1 个答案: