Question

这里我要显示此幻灯片和视频内联。我尝试过千种不同的例子，但它们无法解决我的问题。任何有用的建议都将是一个巨大的帮助，因为我是网络开发的初学者。谢谢！

var myIndex = 0;

carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }

  myIndex++;

  if (myIndex > x.length) {
    myIndex = 1
  }

  x[myIndex - 1].style.display = "block";

  setTimeout(carousel, 4000);
}

<div class="slideshow" style="max-width: 600px" style="display: inline" style="float: right">

  <div>
    <img class="mySlides" src="canada.jpg" style="width: 100%" alt="canada">
    <img class="mySlides" src="myanmar.jpg" style="width: 100%" alt="myanmar">
    <img class="mySlides" src="china.jpg" style="width: 100%" alt="china">
    <img class="mySlides" src="italy.jpg" style="width: 100%" alt="italy">
  </div>

  <div>
    <video width="400" controls style="float: right" style="display: inline" poster="http://via.placeholder.com/320x280?text=video">
		<source src="Intro.mp4" type = "video/mp4">
	</video>
  </div>

</div>

Answer 1

现在你可以使用flexbox并排放置两个元素。 CSS-tricks在这个主题上有一个非常thorough guide，因此我不会透露细节。

在您的特定情况下，请使用以下内容：

.slideshow {
  display: flex;
  justify-content: space-between;
  // no float and similar here
}

.slideshow > div {
  width: 50%;
}

您可能需要在flex和justify-content前加上前缀以获得更好的跨浏览器支持，并且您可能需要为IE 10支持添加flex: 1。

你也可以稍微清理一下代码。您不希望在属性中使用=符号周围的空格，并且您不需要多次指定style属性。一个就够了，用分号分隔规则。

Answer 2

每当您想要将两个元素放在同一行上时，请提供其父display: flex。

默认情况下，Flex容器的子项并排排列。然后，您可以使用flex属性来控制它们的大小和位置。

或者，您可以将子元素的display值切换为inline或inline-block。

如何在同一行显示两个元素？

2 个答案: