HTML是否可以設置第二個類繼承主ID？

Codepen：https://codepen.io/jayvicious/pen/EXardz

.productholder { 
 
    width: 50%; 
 
    display: inline-block; 
 
} 
 

 
#content2p { 
 
    padding-top: 19px; 
 
    padding-bottom: 40px; 
 
    margin-left: 6cm; 
 
    width: auto; 
 
} 
 

 
.bookingFormHeader { 
 
    display: inline-flex; 
 
    background-color: lightgrey; 
 
    width: 300px; 
 
    border: 25px solid green; 
 
    padding: 25px; 
 
    margin: 25px; 
 
}

<div id="content2p"> 
 

 
    <img class="productholder" src="http://via.placeholder.com/662x442.png"> 
 
    <p class="bookingFormHeader">Test Test</p> 
 

 
</div>

說明： -

我設置的容器用id content2p。在這裏，我想把兩個課並列。第一類productholder工作正常。我唯一的問題將是bookingFormHeader。它縮進到谷底，我希望把它同一行下面的例子輸出：

預訂實際上是與邊界框形式：

我試着許多方法通過改變顯示以下內容： -

inline-block flex table inline-table

然而我沒有運氣，有沒有我失蹤的元素？提前欣賞。

來源

2017-06-06 FreedomPride

沒有運氣，我還是想你，但它是基於在顯示屏上？ – FreedomPride

這是你在追求什麼？請根據您的喜好調整邊距和寬度。

#content2p { 
 
    padding-top: 19px; 
 
    padding-bottom: 40px; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 

 
.bookingFormHeader { 
 
    background-color: lightgrey; 
 
    width: 100px; 
 
    border: 25px solid green; 
 
    padding: 25px; 
 
    margin: 25px; 
 
}

<div id="content2p"> 
 

 
    <img class="productholder" src="http://www.placehold.it/80"> 
 
    <p class="bookingFormHeader">Test Test</p> 
 

 
</div>

來源

2017-06-06 04:06:09 Gerard

是的，這就是我要找的。這些對我來說是新的， 'justify-content：space-around;' 我會搜索它的文檔，謝謝你的替代建議。 – FreedomPride

看看這裏：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Gerard

一個簡單的問題，現在導致'bookingformheader'當我試圖通過改變保證金，它不會給空間 – FreedomPride

您還可以使用類的內部ID

<style> 
#id 
{ 
****some style 
} 
.class 
{ 
**codes 
}

HTML這樣

<div id="id> 
<div class="class" 
</div> 
</div>

來源

2017-06-06 05:55:44

HTML是否可以設置第二個類繼承主ID？

回答

相關問題