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？

回答

相关问题