0

1 列のフレキシブル/1 列の固定レイアウトを実現しようとしています。「col-a」は柔軟で、100% ～ 110px を占める必要があります。「col-b」は固定して右揃えにする必要があります。

負のマージンを使用しようとしていますが、ほとんど運がありません。

<div class="cont">

    <div class="col-a">
    Be flexible 
    </div>

    <div class="col-b">
    Be fixed
    </div>

</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

.cont {
background-color: #00f;
padding: 10px;
overflow:hidden;
}

.col-a {
background-color: #0ff;
padding-right: 110px;
margin-right: -110px;
float: left;
}

.col-b {
background-color: #ff0;
width: 110px;
float: left;
}

このマークアップだけでできますか？/*答えが見つかりました*/これが解決策です

.cont {
  background-color: #00f;
  overflow:hidden;
  padding: 10px;
}

.col-a {
  width: 100%;
  background-color: #0ff;
  margin-right: -110px;
  float: left;
}

.col-b {
  background-color: #ff0;
  width: 110px;
  float: right;
}
4

2 に答える 2

1

私はこれに負のマージンを使用しません。

これが私がそれを設定する方法です。

  1. 列の親コンテナーを相対位置に設定します。
  2. 列 A を 110px のパディング右に設定します (列 B のスペースを確保するため)。
  3. 列 B を 110px の固定幅で右上に絶対配置するように設定します。

これにより、列 A が水平方向に 100% 拡張され、右側に列 B のスペースが残されます。

上記で概説したものの例を次に示します: http://jsfiddle.net/NPn8d/

于 2012-08-31T19:20:08.617 に答える
0

では、こんなものはいかがでしょう。

<style type="text/css"> 
     .cont{position:relative;}
     .col-a{
             border:1px solid #0000ff;
             width:auto;
             margin:0,110,0,0;
           } 
     .col-b{
             border:1px solid #ff0000;
             width:110px;
             float:right;
             top:0;
             position:absolute;
             margin:0,0,0,-110
     } 
</style> 
<div class="cont"> 
    <div class="col-a">Be flexible</div> 
    <div class="col-b">Be fixed</div> 
</div>
于 2012-08-31T19:26:36.210 に答える