当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Cross-browser sizing of floated divs inside of floated divs

问题描述:

I'd like to get the following sizing behavior on a row of data. The 'abcd...' field is a variable size, and I'd like as much of it displayed as possible after all the other fields have taken up their required space. The '0123...' field is a variable size, and I'd like fully displayed right after the first field. The 'X' field is a known fixed size, and I'd like it pinned to the right side.

| abcdefghijklmnopqrstuvwxyz | 0123456789 | | X |

| abcdefghijklmnopqrstuvwxyz | 0123456789 | | X |

| abcdefghijklmnopqrstuvwxyz | 0123456789 | | X |

| abcdefghijklmnopqrstuvwxyz | 0123456789 | X |

| abcdefghijklmnopqrstuvwx | 0123456789 | X |

| abcdefghijklmnopqrstuv | 0123456789 | X |

| abcdefghijklmnopqrst | 0123456789 | X |

I've tried many table-based and floating div approaches, but nothing works right across all browsers. Here's an approach that works with webkit but not others.

<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>

Some of the nested divs are not required by webkit, but I was trying to get this working in other browsers. Anyone have ideas on how to solve this? Thanks!

网友答案:

I have misread the question the first time, and since my answer was nowhere near what you were looking for, I decided to replace it completely with the proper solution in order to keep the answer clean. Anyways, this should do the trick:

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 -->

The only thing that's required is to change the background of .col_2 so it matches the one of .col_1 since the extra content of .col_1 is hidden behind .col_2.

Hope this helps !

网友答案:

You're going to need to specify a "row" div that holds all 3 divs per row. tell every one of those inner cells of the row to clear:none; and float where desired!

<!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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: