0

に設定されたコンテナがoverflow-x: hidden;あり、一連の行が含まれています。行は 2 つの列に分割されます。右の列の内容が変更されると、左の列は拡大および縮小できる必要があります。レイアウトは次のようになります。

<div class="no-x-overflow">
  <div class="data-row container-fluid">
    <div class="left-column pull-left">
      <a href="#"></a>
    </div>
    <div class="right-column pull-left">
      <div class="detail-row1"></div>
      <div class="detail-row2"></div>
      <div class="detail-row3"></div>
    </div>
  </div>
</div>

さまざまなdetail-rowdiv を UI で非表示にしたり表示したりして、data-rowを縮小したり拡大したりできます。left-columndiv も同じことができる必要があります。heightそれらを機能させるために、さまざまな部分にどのような価値を与えることができますか。

スタイル:

.no-x-overflow {
  overflow-x: hidden;
}

.data-row {
  overflow: hidden;
  clear: both;
}

.left-column {
  width: 10%;
  height: 100%;
  padding: 10px;
  border-right: 1px solid #999;
}

.right-column {
  width: 90%;
}
4

1 に答える 1

0

この質問は、右の列に合わせて左の列を拡大および縮小する必要がある理由の背景がなければ、答えるのが難しいです。たとえば、左の列に右の列と同じ高さに一致する背景色または境界線を指定しようとしていた場合、その背景色をコンテナーに指定してから、右の列に別の背景を適用します。これが私が話していることのフィドルです。http://jsfiddle.net/BY2Xh/1/

.data-row {
overflow: auto;
width: 100%;
position: relative;
background: yellow;
}

.left-column {
width: 10%;
box-shadow: 1px 0 0 solid #999;
float: left;
}  

.right-column {
width: 90%;
box-shadow: 0 0 0 1px red;
float: left;
background: green;
}

このコンテンツの後にフローティング要素があり、幅と oveflow: auto をコンテナにも適用できるよりも、短い左の列によって作成された空のスペースを埋めたくないという問題がある場合。

また、幅 %s の合計が 100 になり、ボーダーまたはパディングもある場合、レイアウトは期待どおりに機能しません。これらの内側の div からパディングを削除する必要があり、ボックス シャドウを使用して DOM のスペースを占有しない境界線を適用できます。

于 2013-01-25T13:22:42.953 に答える