Question

我想在一行数据上获得以下大小调整行为。 'abcd ...'字段是一个可变大小，我希望在所有其他字段占用所需空间后尽可能多地显示它。 '0123 ...'字段是一个可变大小，我想在第一个字段后面完全显示。 'X'字段是一个已知的固定大小，我希望它固定在右侧。

| abcdefghijklmnopqrstuvwxyz | 0123456789 |     | X |
| abcdefghijklmnopqrstuvwxyz | 0123456789 |   | X |
| abcdefghijklmnopqrstuvwxyz | 0123456789 | | X |
| abcdefghijklmnopqrstuvwxyz | 0123456789 | X |
| abcdefghijklmnopqrstuvwx | 0123456789 | X |
| abcdefghijklmnopqrstuv | 0123456789 | X |
| abcdefghijklmnopqrst | 0123456789 | X |

我尝试了很多基于表格和浮动的div方法，但没有一种方法适用于所有浏览器。这是一种适用于webkit但不适用于其他方法的方法。

<div style="width:300px">
 <div style="float:right;width:20px">
  X
 </div>
 <div style="overflow:hidden">
  <div style="float:left">
   <div style="overflow:hidden">
    <div style="float:right">
     0123456789
    </div> 
    <div style="overflow:hidden;white-space:nowrap">
     abcdefghijklmnopqrstuvwxyz
    </div>
   </div>
  </div>
 </div> 
</div>

webkit不需要某些嵌套的div，但我试图在其他浏览器中使用它。任何人都有如何解决这个问题的想法？谢谢！

Answer 1

我第一次误解了这个问题，而且由于我的答案远不及你想要的，我决定用适当的解决方案完全取代它，以保持答案的清洁。无论如何，这应该可以解决问题：

<强> CSS

.row {
    width: 300px;
}
.clear {
    clear: both;
}
.col_1 {
    float: left;
    position: relative;
    width: 280px;
    overflow: hidden;
}
.col_2 {
    position: absolute;
    background: #FFF;
    top: 0;
    right: 0;
    white-space: nowrap;
}
.col_3 {
    float: right;
    width: 20px;
}

<强> HTML

<div class="row">
    <div class="col_1">
        abcdefghijklmnopqrstuvwxyz
        <div class="col_2">0123456789</div>
    </div>
    <div class="col_3">x</div>
    <div class="clear"></div> 
</div>
<!-- repeat as needed -->

唯一需要的是更改.col_2的背景，使其与.col_1的背景匹配，因为.col_1的额外内容隐藏在.col_2后面。< / p>

希望这有帮助！

Answer 2

您将需要指定一个“行”div，每行包含所有3个div。告诉行中每个内部单元格清除：无;并浮动在需要的地方！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
html, div, body {font-family: arial; font-size: 12px; font-weight: bold; color: #666666;}
html {margin-top: 200px;}

div.contain {
border: 5px solid black;
margin: 0 auto;
width: 500px !Important;
height: 500px !important;
}

div.row{
width: 500px;
display: block;
overflow: auto;
}
div.letters {
float: left;
clear: none;
border: 1px solid red;
width: auto;
padding: 10px;
}
div.numbers{
float: left;
clear: none;
border: 1px solid blue;
width: auto;
padding: 10px;
}
div.x {
float: right;
clear: none;
border: 1px solid green;
width: auto;
padding: 10px;
}

</style>
</head>
<body>
<div class="contain">

<div class="row">
    <div class="letters">abcdefghijklmnopqrstuvwxyz</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>
<div class="row">
    <div class="letters">abcdefghijklmnopqrstuvwxy</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>
<div class="row">
    <div class="letters">abcdefghijklmnopqrstuvwx</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>
<div class="row">
    <div class="letters">abcdefghijklmnopqrstuvw</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>
<div class="row">
    <div class="letters">abcdefghijklmnopqrstuv</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>
<div class="row">
    <div class="letters">abcdefghijklmnopqrstu</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>
<div class="row">
    <div class="letters">abcdefghijklmnopqrst</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>
<div class="row">
    <div class="letters">abcdefghijklmnopqrs</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>
<div class="row">
    <div class="letters">abcdefghijklmnopqr</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>
<div class="row">
    <div class="letters">abcdefghijklmnopq</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>
<div class="row">
    <div class="letters">abcdefghijklmnop</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>
<div class="row">
    <div class="letters">abcdefghijklmno</div>
    <div class="numbers">0123456789</div>
    <div class="x">X</div>
</div>

</div>
</body>
</html>

浮动div中浮动div的跨浏览器大小调整

2 个答案: