Question

问题

我有一个包含有关我网站上用户的动态信息的框。由于数据是动态的，因此该框必须自动适合内容。我没有问题让这个工作，如下所示：

Example - jsFiddle

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

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

User Information Box (new look)

然而，当上述内容增加时会出现问题，因为页脚列也必须相对扩展：

User Information Box Expanded (new look)

我的问题

如果不使用javascript （在这种情况下我不会诉诸），我无法想到实现这一目标的任何好方法。 有人能看到使用CSS实现这一目标的好方法吗？

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

我尝试过的所有内容都没有用，结果我没有任何代码可以用作上述jsFiddle中包含的代码之外的起点。我希望这已经足够了

非常感谢任何帮助： - ）

Answer 1

尝试以下代码：

如果删除了CSS声明的第5行（#dd_ui div#top div），则顶部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包含防止单元格包装的正确代码。

jsFiddle

在div，float或absolute上自动扩展宽度？

问题

我的问题

1 个答案: