Question

我想将视频和图像放在一起，两者都是父母的50％。以下是我尝试过的代码。对我来说，看起来每个包装div应该是内联的，50％;子元素填充宽度。

HTML：

library(lubridate)
library(dplyr)

temp_data$shifted_date <- temp_data$date - 60
temp_data$year <- year(temp_data$shifted_date) # The year of the "shifted" date
temp_data$month <- month(temp_data$date) # The actual month
temp_data$winter <- ifelse(temp_data$month %in% c(11, 12, 1, 2), 1, 0)

outdf <- temp_data %>%
  group_by(year, site) %>%
  summarize(mean_winter = mean(tmax[winter == 1])) %>%
  data.frame

head(outdf)
# year site mean_winter
# 1 1979    1    5.608333
# 2 1980    1    6.777311
# 3 1981    1    5.712500
# 4 1982    1    5.278689

CSS：

<div>
   <div class="video-container">
    <video poster="Resources/css/img/ioposter.png" controls="true" muted loop>
        <source src="/Resources/img/vid.mp4"  type="video/mp4">
        Your browser does not support the video tag.
    </video>
   </div>
   <div style="width:50%;display:inline-block;">
     <img style="width:100%;" src="Resources/myimg.jpg">
   </div>
</div>

Answer 1

我已经创建了一个用于测试的快速jsFiddle：https://jsfiddle.net/L5euvkzm/2/

.wrapper {
    font-size: 0;
}

我所做的只是在外部div中添加一个类，然后应用font-size：0;这种情况发生的原因是因为在两个容器之间添加了空白区域。还有其他方法可以解决这个问题，但这种方式我喜欢让元素很好地堆叠在一起。

Answer 2

以下是如何使用Flexbox完成它：

＆＃13;

#wrapper {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
  display: block;
  width: 50%;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<div id="wrapper">
  <div class="video-container">
    <video poster="Resources/css/img/ioposter.png" controls="true" muted loop>
        <source src="/Resources/img/vid.mp4"  type="video/mp4">
        Your browser does not support the video tag.
    </video>
  </div>
  <div class="image-container">
    <img src="http://via.placeholder.com/200x200">
  </div>
</div>

＆＃13;

以下是传统花车的完成方法：

＆＃13;

#wrapper:after {
  content: "";
  visibility: hidden;
  clear: both;
  display: block;
  height: 0px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
  display: block;
  width: 50%;
  float: left;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-container {
  width: 50%;
  float: left;
}

＆＃13;

<div id="wrapper">
  <div class="video-container">
    <video poster="Resources/css/img/ioposter.png" controls="true" muted loop>
        <source src="/Resources/img/vid.mp4"  type="video/mp4">
        Your browser does not support the video tag.
    </video>
  </div>
  <div class="image-container">
    <img src="http://via.placeholder.com/200x200">
  </div>
</div>

＆＃13;

如何将视频和图像内嵌，父母的宽度的一半？

2 个答案: