调整大小时寡妇的列高

时间：2018-06-08 12:15:28

标签： html css

我被卡住了，我想让左栏的高度等于右栏的高度。似乎问题是我的视频宽度，但我知道如何解决这个问题

我输入了代码：

@font-face {
  font-family: "poppins-bold";
  src: url('../css/fonts/Poppins-Bold.ttf');
}

@font-face {
  font-family: "poppins-light";
  src: url('../css/fonts/Poppins-Light.ttf');
}

@font-face {
  font-family: "poppins-medium";
  src: url('../css/fonts/Poppins-Medium.ttf');
}

@font-face {
  font-family: "poppins-regular";
  src: url('../css/fonts/Poppins-Regular.ttf');
}

@font-face {
  font-family: "poppins-semibold";
  src: url('../css/fonts/Poppins-SemiBold.ttf');
}

body {
  margin: 0;
  background-color: #0080b9;
}

.conteneur {
  min-width: 1050px;
}

.light {
  font-family: "poppins-light";
}

.video-cover {
  width: 100%;
  height: 175px;
  background-color: gray;
  margin-top: 10px;
  margin-bottom: 50px;
}

#bloc-gauche {
  background-color: white;
  width: 25%;
  float: left;
  /*height: 900px;*/
  height: 100vh;
  color: #0080b9;
  font-family: "poppins-semibold";
  overflow: scroll;
  /*
        padding-left:20px;
        padding-right:20px;
        padding-top:20px;
        */
}

.wrapper-bloc-gauche {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
}

#intro {
  width: 185px;
  margin-bottom: 50px;
}

#content-bloc-droite {
  padding-top: 25px;
}

#bloc-droite {
  background-color: #0080b9;
  width: 75%;
  float: right;
  font-family: "poppins-semibold";
  color: white;
  background-repeat: repeat-x;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#description {
  font-size: 15px;
  text-align: center;
  width: 45%;
  margin-top: 25px;
}

.video-player-container {
  /*width:40%;*/
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 50px;
  margin-bottom: 40px;
}

.video-player {
  width: 100%;
  border: 5px solid #ECECEC;
  box-sizing: border-box;
}

.footer-bloc-droite {
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  overflow: hidden;
}

#logo-joon {
  float: left;
  width: 200px;
}

#btn-xp {
  display: inline-block;
  margin: 0 auto;
  background-color: white;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #0080b9;
}

#joon-p {
  float: right;
  width: 200px;
}

#joon-p-img {
  /*transform: rotate(-20deg);
        padding-bottom: 0px;
        -webkit-transform-origin-x: -55px;
        overflow: hidden;
        */
  -webkit-transform-origin-x: -55px;
  width: 95%;
}

#left-block {
  float: left;
}

#right-block {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class='conteneur'>
  <div id='bloc-gauche'>

    <div class='wrapper-bloc-gauche'>
      <div class='row'>
        <div id='intro'>
          Vivez l'intégralité d'un voyage JOON avec Maxime Gasteuil
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 1 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 2 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 3 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 4 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
    </div>

  </div>
  <div id='bloc-droite'>
    <div id='content-bloc-droite'>
      <div class='row'>
        <img src='http://94.23.46.98/img/logo-qpV2.png' style='width:25%;' class='center-block'>
      </div>
      <div class='row'>
        <div id='description' style='text-align:center;' class='center-block'>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis veritatis, fugit quia repudiandae est dignissimos modi expedita ullam totam, aliquid odit voluptas omnis dolores nemo nam
        </div>
      </div>
      <div class='row'>
        <div class='video-player-container center-bloc'>
          <video controls class='video-player center-block' style='min-width:475px;max-width:40%;'>
                                <source src='http://web1.fr-hmd.com/adpulse/videos-adpulse/joon-1.mp4' type="video/mp4">
                            </video>
        </div>
      </div>
      <div class='footer-bloc-droite'>
        <div class='row'>
          <div id='logo-joon'>
            <img src='http://94.23.46.98/img/logo-joon.png' width='150px;'>
          </div>

          <div id='btn-xp'>
            Démarrer l'expérience de voyage
          </div>

          <div id='joon-p'>
            <img src='http://94.23.46.98/img/logo-pV2.png' width='240px;' id='joon-p-img'>
          </div>
          <div style='clear:both'></div>
        </div>
      </div>
    </div>
  </div>
  <div style='clear:both'></div>
</div>

我还有一个小问题：我想把飞机放得很小。 我尝试使用position：absolute但所有其他元素都不居中。

1 个答案:

答案 0 :(得分：-1)

你提供了如此多的代码，这是没用的，因为你无法解决你的问题，无论如何，我要说的是我试图添加某些height:100%和height:100vh在一些wrapper元素上它现在应该可以工作。

@font-face {
  font-family: "poppins-bold";
  src: url('../css/fonts/Poppins-Bold.ttf');
}

@font-face {
  font-family: "poppins-light";
  src: url('../css/fonts/Poppins-Light.ttf');
}

@font-face {
  font-family: "poppins-medium";
  src: url('../css/fonts/Poppins-Medium.ttf');
}

@font-face {
  font-family: "poppins-regular";
  src: url('../css/fonts/Poppins-Regular.ttf');
}

@font-face {
  font-family: "poppins-semibold";
  src: url('../css/fonts/Poppins-SemiBold.ttf');
}

body {
  margin: 0;
  background-color: #0080b9;
}

.conteneur {
  min-width: 1050px;
  height: 100vh;
}

.light {
  font-family: "poppins-light";
}

.video-cover {
  width: 100%;
  height: 175px;
  background-color: gray;
  margin-top: 10px;
  margin-bottom: 50px;
}

#bloc-gauche {
  background-color: white;
  width: 25%;
  float: left;
  /* height: 900px; */
  height: 100vh;
  color: #0080b9;
  font-family: "poppins-semibold";
  overflow: scroll;
  /*
        padding-left:20px;
        padding-right:20px;
        padding-top:20px;
        */
}

.wrapper-bloc-gauche {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  max-height: 100%;
}

#intro {
  width: 185px;
  margin-bottom: 50px;
}

#content-bloc-droite {
  padding-top: 25px;
  max-height: 100%;
  overflow: auto;
}

#bloc-droite {
  background-color: #0080b9;
  width: 75%;
  float: right;
  font-family: "poppins-semibold";
  color: white;
  background-repeat: repeat-x;
  height: 100%;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#description {
  font-size: 15px;
  text-align: center;
  width: 45%;
  margin-top: 25px;
}

.video-player-container {
  /*width:40%;*/
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 50px;
  margin-bottom: 40px;
}

.video-player {
  width: 100%;
  border: 5px solid #ECECEC;
  box-sizing: border-box;
}

.footer-bloc-droite {
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  overflow: hidden;
}

#logo-joon {
  float: left;
  width: 200px;
}

#btn-xp {
  display: inline-block;
  margin: 0 auto;
  background-color: white;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #0080b9;
}

#joon-p {
  float: right;
  width: 200px;
}

#joon-p-img {
  /*transform: rotate(-20deg);
        padding-bottom: 0px;
        -webkit-transform-origin-x: -55px;
        overflow: hidden;
        */
  -webkit-transform-origin-x: -55px;
  width: 95%;
}

#left-block {
  float: left;
}

#right-block {
  float: right;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class='conteneur'>
  <div id='bloc-gauche'>

    <div class='wrapper-bloc-gauche'>
      <div class='row'>
        <div id='intro'>
          Vivez l'intégralité d'un voyage JOON avec Maxime Gasteuil
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 1 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 2 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 3 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
      <div id='playlist'>
        <div class='video-preview'>
          <div class='video-title'>Ep 4 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
          <div class='video-cover'></div>
        </div>
      </div>
    </div>

  </div>
  <div id='bloc-droite'>
    <div id='content-bloc-droite'>
      <div class='row'>
        <img src='http://94.23.46.98/img/logo-qpV2.png' style='width:25%;' class='center-block'>
      </div>
      <div class='row'>
        <div id='description' style='text-align:center;' class='center-block'>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis veritatis, fugit quia repudiandae est dignissimos modi expedita ullam totam, aliquid odit voluptas omnis dolores nemo nam
        </div>
      </div>
      <div class='row'>
        <div class='video-player-container center-bloc'>
          <video controls class='video-player center-block' style='min-width:475px;max-width:40%;'>
                                <source src='http://web1.fr-hmd.com/adpulse/videos-adpulse/joon-1.mp4' type="video/mp4">
                            </video>
        </div>
      </div>
      <div class='footer-bloc-droite'>
        <div class='row'>
          <div id='logo-joon'>
            <img src='http://94.23.46.98/img/logo-joon.png' width='150px;'>
          </div>

          <div id='btn-xp'>
            Démarrer l'expérience de voyage
          </div>

          <div id='joon-p'>
            <img src='http://94.23.46.98/img/logo-pV2.png' width='240px;' id='joon-p-img'>
          </div>
          <div style='clear:both'></div>
        </div>
      </div>
    </div>
  </div>
  <div style='clear:both'></div>
</div>

相关问题
最新问题