Html 在div、float或absolute上自动扩展宽度？问题_Html_Css

Html 在div、float或absolute上自动扩展宽度？问题

html css

Html 在div、float或absolute上自动扩展宽度？问题,html,css,Html,Css,我有一个框，其中包含关于我网站上用户的动态信息。由于数据是动态的，框必须自动适应内容。我没有问题让它工作，如图所示：如您所见，如果内容较长，则div#dd_ui只是相对展开，元素保持在正确的位置尽管上面的例子有效，我还是希望这个盒子看起来有点不同。我希望底部的两列始终彼此宽度相同（但相对调整大小），因此允许在其内容上居中对齐。换言之，我希望盒子看起来像这样：但是，当上述内容增加时，问题就出现了，因为页脚列也必须相对像这样展开：我的问题如果不使用javascript（在本例中我将不

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

如您所见，如果内容较长，则

div#dd_ui

只是相对展开，元素保持在正确的位置

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

但是，当上述内容增加时，问题就出现了，因为页脚列也必须相对像这样展开：

我的问题如果不使用javascript（在本例中我将不使用javascript），我想不出任何好的方法来实现这一点有人能看到使用CSS实现这一点的好方法吗？

我考虑使用

width:50%

但这不起作用，因为两个div之间有一个1像素的分隔符（很可能是边框）

我尝试过的一切都没有成功，结果是除了上面的JSFIDLE中包含的代码之外，我没有任何代码可以用作起点。我希望这足够了

非常感谢您的帮助：-）

请尝试下面的代码：

如果删除CSS声明的第5行（

#dd#u ui div#top div

），则top 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>


#dd#u ui{位置：绝对；顶部：10px；左侧：10px；填充：0px；边框：1px实心#666；字体系列：arial；}
#dd_ui div{位置：相对；}
#dd#u ui div#底部{边框顶部：1px实心#666；最大高度：75px；}
#dd_ui div div{显示：内联块；顶部：0px；左侧：0px；宽度：50%；边距：0px；垂直对齐：顶部；}
#dd_ui div#top div{位置：相对；宽度：自动；}
#dd_ui div#底部div{左边框：1px实心#666；右边框：-1px；}
#dd_ui div#底部div:第一个子项{右边距：0px；左边距：0px；}
#dd_ui div div p{位置：相对；左侧：50%；显示：块；宽度：100%；边距：0px；边距左侧：-50%；填充：0px；边框：2px纯红色；}
#dd_ui div span{position:relative；display:block；文本对齐：left；行高：100%；}
#dd_ui div div.right span{text align:right；}
#dd_ui_name{边距：20px 20px 0px；字体大小：18px；字体重量：粗体；}
#dd#ui#u公司{边距：5px20px 10px；字体大小：12px；颜色：#666；}
#dd_ui_电子邮件{边距：23px 20px 0px；字体大小：14px；字体重量：粗体；宽度：自动；}
#dd#ui#u ac#u编号{边距：5px20px 10px；字体大小：12px；颜色：#666；}
#dd_ui.title{字体大小：12px；颜色：666；边距：20px 20px 0；}
#dd_ui.value{font size:18px；font-weight:bold；margin:5px20px 20px；}
这里是全名
有限公司董事
ASKJDHASJKHASDJKASDHASJKJDHAKJDHASKDJ
账号：5
上次登录
2012年11月9日15:35
注册于
2家公司

希望这有帮助，你可以玩得更远

更新@BenCarey
上面的代码是正确的，但是当内容大于容器时，有一些问题会导致单元格换行。下面的JSFIDLE包含正确的代码以防止单元格被包装
请尝试下面的代码：
如果删除CSS声明的第5行（
#dd#u ui div#top div
），则top 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>

#dd#u ui{位置：绝对；顶部：10px；左侧：10px；填充：0px；边框：1px实心#666；字体系列：arial；} #dd_ui div{位置：相对；} #dd#u ui div#底部{边框顶部：1px实心#666；最大高度：75px；} #dd_ui div div{显示：内联块；顶部：0px；左侧：0px；宽度：50%；边距：0px；垂直对齐：顶部；} #dd_ui div#top div{位置：相对；宽度：自动；} #dd_ui div#底部div{左边框：1px实心#666；右边框：-1px；} #dd_ui div#底部div:第一个子项{右边距：0px；左边距：0px；} #dd_ui div div p{位置：相对；左侧：50%；显示：块；宽度：100%；边距：0px；边距左侧：-50%；填充：0px；边框：2px纯红色；} #dd_ui div span{position:relative；display:block；文本对齐：left；行高：100%；} #dd_ui div div.right span{text align:right；} #dd_ui_name{边距：20px 20px 0px；字体大小：18px；字体重量：粗体；} #dd#ui#u公司{边距：5px20px 10px；字体大小：12px；颜色：#666；} #dd_ui_电子邮件{边距：23px 20px 0px；字体大小：14px；字体重量：粗体；宽度：自动；} #dd#ui#u ac#u编号{边距：5px20px 10px；字体大小：12px；颜色：#666；} #dd_ui.title{字体大小：12px；颜色：666；边距：20px 20px 0；} #dd_ui.value{font size:18px；font-weight:bold；margin:5px20px 20px；} 这里是全名有限公司董事 ASKJDHASJKHASDJKASDHASJKJDHAKJDHASKDJ 账号：5 上次登录 2012年11月9日15:35 注册于 2家公司
希望这有帮助，你可以玩得更远
更新@BenCarey
上面的代码是正确的，但是当内容大于容器时，有一些问题会导致单元格换行。下面的JSFIDLE包含正确的代码以防止单元格被包装

您可以使用
宽度：50%并使用插图border@Andy如何创建插入边框？它是CSS3还是在较旧的浏览器中工作？@Andy而且，如果页脚框的内容大于50% ，那么我需要两个框都展开（虽然这不是必需的，因为我可以指定最坏情况下的最小宽度）仅IE