1

私のページでは、ヘッダー領域に2つの要素があります。最初の要素をヘッダー領域の中央に配置し、2番目の要素をヘッダー領域の右側に完全にプッシュするようにします。このコードを使用して、目的の効果を達成しました。

<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を3つのスペースに分割し、それぞれのパーティション内にelement1＆を配置したことに気付くでしょう。element2パーティションを作成せずに同じレイアウトを実現するにはどうすればよいheader-areaですか？

4

1 に答える 1

3

これを行うにはいくつかの方法があります。ここに2つあります：

オプション＃1：フロート

HTML：

<div id="header">
    <div class="right">Element on right end</div>
    <div class="center">Center-Aligned Element</div>
</div>

CSS：

#header {
    text-align: center;
}

#header div.center {
    margin: 0 auto;
    text-align: center;
    width: 30%;
}

#header div.right {
    float: right;
    text-align: right;
}

オプション＃2：絶対位置

HTML：

<div id="header">
    <div>Center-Aligned Element</div>
    <div class="right">Element on right end</div>
</div>

CSS：

#header {
    text-align: center;
}

#header div {
    text-align: center;
    width: 30%;
    margin: 0 auto;
}

#header div.right {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
}

要素の使用例：

HTML：

<div id="header">
    <h3>Main Title Goes Here</h3>
    <p>Subtitle Goes Here</h3>
    <button>Element on right end</button>
</div>

CSS：

#header {
    text-align: center;
}

#header h3,
#header p {
    margin: 0 auto;
    text-align: center;
    width: 30%;
}

#header button {
    position: absolute;
    top: 0;
    right: 0;
}
于 2012-10-28T20:16:08.817 に答える