1

问题

我有一个框，其中包含有关我网站上用户的动态信息。由于数据是动态的，盒子必须自动适应内容。我没有问题让它工作，如下所示：

示例 - jsFiddle。

如您所见，如果内容较长，则div#dd_ui只是相对扩展，并且元素保持在正确的位置。

尽管上面的例子有效，但我实际上希望盒子看起来有点不同。我希望两个底部列的宽度始终彼此相同（但相对调整大小），因此允许它们的内容居中对齐。换句话说，我希望盒子看起来像这样：

用户信息框（新外观）

但是，当上述内容增加时，问题就出现了，因为页脚列也必须相对扩展，如下所示：

扩展的用户信息框（新外观）

我的问题

如果不使用 javascript （在这种情况下我不会使用），我想不出任何好的方法来实现这一点。任何人都可以看到使用 CSS 实现这一目标的好方法吗？

我考虑过使用width:50%;，但这不起作用，因为两个 div之间有一个 1 像素的分隔线（很可能是一个边框） 。

我尝试过的一切都没有奏效，因此除了上面的 jsFiddle 中包含的代码之外，我真的没有任何代码可以用作起点。我希望这就足够了

非常感谢任何帮助:-)

4

1 回答 1

1

试试下面的代码：

如果 CSS 声明 ( #dd_ui div#top div) 的第 5 行被删除，顶部 DIV 将使用 50% 的宽度，但在这种情况下，右上角的 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 包含正确的代码以防止单元格换行。

jsFiddle

于 2012-11-13T16:20:09.783 回答