在我的页面上,标题区域中有两个元素。我希望第一个元素位于标题区域的中间,第二个元素一直被推到标题区域的右侧。我使用以下代码达到了预期的效果:
<div id="header-area" style="text-align:center;width:100%;">
<div id="partition1" style="display:inline-block;width:33%;"></div>
<div id="partition2" style="display:inline-block;width:33%;">
<div id="element1" style="display:inline;width:400px;height:100px;">
<h3 style="display:inline;width:400px;">Main title Goes Here</h3><br/><br/>
<p style="display:inline;width:400px;">Subtitle goes here</p>
</div>
</div>
<div id="partition3" style="display:inline-block;width:33%;text-align:right;">
<div id="Element2" style="display:inline;width:150px;vertical-align:middle;">
<button onclick="history.back();" style="height:45px;width:100px;">
Back</button>
</div>
</div>
</div>
您会注意到我将它们划分为三个空间,并在它们各自的分区内header-area
对齐element1
& 。element2
如何在不分区的情况下实现相同的布局header-area
?