1

問題

サイトのユーザーに関する動的な情報を含むボックスがあります。データは動的であるため、ボックスはコンテンツに自動的に適合する必要があります。これに見られるように、これを機能させるのに問題はありませんでした：

例 - jsFiddle。

ご覧のとおり、コンテンツが長い場合はdiv#dd_ui、要素が相対的に拡大され、要素が正しい位置に留まります。

上記の例は機能していますが、実際にはボックスの外観を少し変えたいと思っています。一番下の 2 つの列を常に互いに同じ幅にして (ただし、相対的にサイズを変更して)、コンテンツの中央揃えを可能にします。つまり、ボックスは次のようになります。

ユーザー情報ボックス (新しい外観)

ただし、フッター列も次のように比較的拡張する必要があるため、上記のコンテンツが増加すると問題が発生します。

ユーザー情報ボックスの拡張 (新しい外観)

私の質問

JavaScriptを使用せずにこれを達成する良い方法は考えられません(この場合は使用しません)。CSSを使用してこれを達成する良い方法を誰かが見ることができますか?

使用することを考えましたが、2 つの divの間に 1 ピクセルの仕切り(おそらく境界線)width:50%;があるため、これは機能しません。

私が試したことはすべてうまくいきませんでした。その結果、上記のjsFiddleに含まれているもの以外に、出発点として使用するコードが実際にはありません。それで十分だと思います

どんな助けにも感謝します:-)

4

1 に答える 1

1

以下のコードを試してください。

CSS 宣言 ( #dd_ui div#top div) の 5 行目を削除すると、上部の DIV は 50% の幅を使用しますが、この場合、右上の div コンテンツが div からはみ出すという問題が発生します。

  <!DOCTYPE html>
  <html><head> 
  <style>
  #dd_ui {position:absolute; top: 10px; left: 10px; padding:0px; border: 1px solid #666; font-family:arial;}
  #dd_ui div {position: relative;}
  #dd_ui div#bottom {border-top: 1px solid #666; max-height: 75px;}
  #dd_ui div div {display: inline-block; top: 0px; left: 0px; width: 50%; margin: 0px; vertical-align:top; }
  #dd_ui div#top div {position:relative; width: auto;}
  #dd_ui div#bottom div {border-left: 1px solid #666; margin-right:-1px;}
  #dd_ui div#bottom div:first-child {margin-right: 0px; border-left: 0px;}
  #dd_ui div div p {position:relative; left: 50%; display:block; width: 100%; margin: 0px; margin-left: -50%; padding:0px; border: 2px solid red;}
  #dd_ui div div span {position: relative; display: block; text-align: left; line-height: 100%;}
  #dd_ui div div.right span {text-align: right;}
  #dd_ui_name {margin:20px 20px 0px; font-size:18px; font-weight:bold;}
  #dd_ui_company {margin:5px 20px 10px; font-size:12px; color:#666;}
  #dd_ui_email {margin:23px 20px 0px; font-size:14px; font-weight:bold; width: auto;}
  #dd_ui_ac_number {margin:5px 20px 10px; font-size:12px; color:#666; }
  #dd_ui .title {font-size:12px; color:#666; margin:20px 20px 0;}
  #dd_ui .value {font-size:18px; font-weight:bold; margin:5px 20px 20px;}
  </style>
  </head><body>
  <div id="dd_ui"><div id="top"><div class="left">
        <span id="dd_ui_name">Full Name Here</span>
        <span id="dd_ui_company">Director, Company Name Limited</span>
  </div><div class="right">
        <span id="dd_ui_email">askjdhasjkhasdjkasdhaksjdhaskjdhakjdhaskdj</span>
        <span id="dd_ui_ac_number">Account Number: 5</span>
  </div></div><div id="bottom"><div class="left">
        <span class="title">Last logged In</span>
        <span class="value">09-Nov-2012 15:35</span>
  </div><div class="right">
        <span class="title">Registered With</span>
        <span class="value">2 Companies</span>
  </div><div>
  </body></html>

これがお役に立てば幸いです。さらにプレイできます。

更新-@BenCareyによる

上記のコードは正しいですが、コンテンツがコンテナーよりも大きい場合にセルが折り返される原因となる問題がいくつかあります。次の jsFiddle には、セルが折り返されないようにするための正しいコードが含まれています。

jsフィドル

于 2012-11-13T16:20:09.783 に答える