如何在同一行顯示兩個元素？

在這裏，我想顯示這個幻燈片放映和視頻內聯。我試過了幾千個不同的例子，但他們無法解決我的問題。任何有用的建議將是一個巨大的幫助，因爲我是一個初學者網絡開發。謝謝！如何在同一行顯示兩個元素？

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"> 
 
\t \t <source src="Intro.mp4" type = "video/mp4"> 
 
\t </video> 
 
    </div> 
 

 
</div>

來源

2017-10-14 hashini.W

這應該是所有你需要開始的：'.slideshow> div {display：inline-block; vertical-align：top; }' – UncaughtTypeError

您能否向我解釋一下這個'vertical-align：top'做了什麼？ @UncaughtTypeError –

這只是一種讓'div'垂直對齊到包含元素頂部的方式，以便它們彼此整齊地排列在一起。我想最好的展示方法是爲'div'申報一個'width'並應用一個'border'值（例如：'.slideshow> div {display：inline-block; vertical-align：top;寬度：50％，border：1px純黑色;}'），然後切換「vertical-align」規則以查看更改。試一試。 – UncaughtTypeError

要放在同一行兩個元素任何時候，給自己的父母display: flex。

默認情況下，flex容器的子項並排排列。然後你可以使用flex屬性來控制它們的大小和位置。

或者，您可以將子元素的display值切換爲inline或inline-block。

來源

2017-10-14 18:14:17

所以我可以添加<< style =「display：flex」>>內嵌div標籤？這是你的意思嗎？ :(@Michael_B –

如果你想讓div孩子並排排列，給他們的父母'display：flex'。這應該是你所需要的：'div class =「slideshow」style =「max-width： 600px; display：flex「>' –

非常感謝您！我可以在一定程度上藉助您的建議解決問題:)再次感謝。 –

現在，您可以使用柔性盒並排放置兩個元素。關於這個主題，CSS技巧有一個非常的thorough guide，所以我不會告訴你細節。

你的具體情況，使用類似：

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

.slideshow > div { 
    width: 50%; 
}

您可能需要前綴flex和justify-content更好的跨瀏覽器支持，你可能需要添加flex: 1對IE 10的支持。

你也可以清理一些代碼。您不希望在屬性中的=符號周圍使用空白，並且不需要多次指定style屬性。一個就足夠了，用分號分隔規則。

來源

2017-10-14 18:18:23 hayavuk

謝謝你這麼多該死的@hayavuk。你的建議是一個很好的解釋，它在一定程度上解決了我的問題。現在它是內聯的，因爲我需要在兩者之間的空間。但我想把這個視頻放在同一行的右側。看起來改變尺寸並不能解決問題。任何想法來解決這個問題呢？：/ –

我不確定視頻，但這是一個完全不相關的話題。我想我在這裏看到過關於它的東西，所以做一些搜索。「適應容器內的HTML5視頻」或其他內容。 – hayavuk

如何在同一行顯示兩個元素？

回答

相關問題