Question

我对HTML很陌生，所以我很难弄清楚如何在addressBookWidgetDiv上面放置一个标签，上面写着选择送货地址，而walletWidgetDiv的一个标签上写着选择付款方法。到目前为止，我所尝试的所有内容都将文本放在两个框之间，当然，我需要在顶部。我尝试使用p和h1标签，但没有运气。

这些元素并排显示。

<div style="width: 100%; display: table;">
    <div style="display: table-row">
        <div id="addressBookWidgetDiv" style="width:400px; height:240px; padding-top: 50px;display: table-cell;"> Left </div>         
        <div id="walletWidgetDiv" style="width:400px; padding-left:10px; padding-top: 50px;height:240px;display: table-cell;"> Right </div>
    </div>
</div>

有什么想法吗？我是新手，所以如果这是基本的，请原谅。

感谢。

Answer 1

你是否只想在＆＃34;左＆＃34;之上获得一个标题？和＆＃34;对＆＃34;文本？如果是这样，我创建了jsfiddle here.

HTML结构：

<div style="width: 100%; display: table;">
    <div style="display: table-row">
        <div id="addressBookWidgetDiv" style="width:400px; height:240px; padding-top: 50px;display: table-cell;">
            <h1>Title</h1> 
            <p>Left</p> 
        </div>         
        <div id="walletWidgetDiv" style="width:400px; padding-left:10px; padding-top: 50px;height:240px;display: table-cell;">
            <h1>Title</h1>
            <p>Right</p>
        </div>
    </div>
</div>`

CSS：

#addressBookWidgetDiv {
    background-color: #c1c1c1;
}

#walletWidgetDiv {
    background-color: #e5e5e5;
}

如果您的意思是标题确实显示在中间，那么您的padding-top: 50px;会导致问题。

Answer 2

您可以通过在当前row上方添加row来轻松实现这一目标，其中包含两个div display: table-cell，请查看您拥有的代码添加 -

<div style="display: table-row">
    <div style="display: table-cell">Select Shipping Address</div>
    <div style="display: table-cell">Select Payment Method</div>
</div>

以上代码 -

<div style="display: table-row">
    <div id="addressBookWidgetDiv" style="width:400px; height:240px; padding-top: 50px;display: table-cell;"> Left </div>         
    <div id="walletWidgetDiv" style="width:400px; padding-left:10px; padding-top: 50px;height:240px;display: table-cell;"> Right </div>
</div>

这里是小提琴 - http://jsfiddle.net/radr3ver/

将标题置于<div>之上

2 个答案: