1

次のドキュメントでは、各スパンに独自の配置を持たせたいと考えています。

<h1>
    <span class="left">Left</span>
    <span class="center">Center</span>
    <span class="right">Right</span>
</h1>

要素を並べ替えたり、スタイルを割り当てたりできます。できればブロック要素の使用は避けたいです。

望ましい結果:

Left             Center            Right|end of container here

これまでのところ、左側のスパンは中央に接着されています

編集：

愚かなプログラミング/レイアウトエラーが原因で、左のフロートが常に失敗していました。愚かな質問で申し訳ありません。

今は正常に動作します

4

4 に答える 4

0

このようなことができます。

HTML:

<div class="main">
    <div class="col">&nbsp;</div>
    <div class="col">&nbsp;</div>
    <div class="col">&nbsp;</div>
    <div class="spacer">&nbsp;</div>
</div>

CSS:

.main { text-align: justify; }
.col { display: inline-block; width: 100px; background: red; } 
.spacer { display: inline-block; width: 100%; ]

デモ

于 2013-10-17T16:57:56.210 に答える
0

これには、html を少し調整する必要があります。しかし、jsfiddle を参照してください。

http://jsfiddle.net/2E3ve/

h1 {
    width: 500px;
    background: green;
    text-align: center;
}
.left {
    text-align: left;
    float: left;
}
.right {
    text-align: right;
    float: right;
}

メインの h2 テキストは中央揃えで左に配置され、左に配置され、左に配置され、右に配置されます。

これは、h2 に設定したサイズに適合します。

于 2013-10-17T16:58:20.297 に答える
0

すべてを左に浮かせます。

.left, .center, .right {
    float: left;
}

そして、互いに触れないようにパディングを追加します。

.center {
    padding: 0 30px;
}

ただし、コンテナを左にフロートさせるのが理想的です。この場合、コンテナはh1であるため、次のようになります。

h1 {
    float: left;
}

完全に機能する jsbin の例を次に示します:
http://jsbin.com/OXolaYi/1/

page.html

  <div id="#container">
    <h1>
      <span class="left">Left</span>
      <span class="center">Center</span>
      <span class="right">Right</span>
    </h1>
    <div class="theRest">rest of container</div>
  </div>

スタイル.css

h1 {
    float: left;
    margin-right: 10px;
}
.center {
    padding: 0 30px;
}
.theRest {
    float: left;
    font-size: 30px;
    padding: 20px;
    border-left: 1px solid #000;
}
于 2013-10-17T16:52:46.120 に答える