DIV width floating issue in CSS_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-14 02:38 出处：网络

I have one issue with floating divs. I would like to set all divs to float:left and display all of them on the same row in the screen:

相关专题：css css-float

I have one issue with floating divs. I would like to set all divs to float:left and display all of them on the same row in the screen:

Example
A - div a "style=float:left"
B - div b "style=float:left"
C - div 开发者_运维百科c "style=float:left"

As appeared on screen:

A  |  B  |   C


However, when contents in C is overflowing, it end up in the next row like this

A   |   B
C

May I know how to make div C back to the same row as div A and B regardless of how big is the content in C? I know that C is at the next row because the width is wider than the previous row can contain. How can we make div C appear as the same row with A and B regardless of how big the content in C? For my case, div C does not have a fixed width, and I dont intent to set the maximum width too. But A and B has the fixed width.

Thank you.

You can't do it just by using floats if C doesn't have a fixed with. However, you should be able to accomplish what you want by not setting float on C, and giving it a margin-left that equals the widths of A + B.

By giving C a left margin, it will appear to the right of A and B (as there's available space for it there) and, because you are not assigning it any width, it will occupy the remaining space. As a bonus, if C grows higher than A & B, it won't move content below the other boxes.

I think I'd use absolute positioning for this.

<html>
<head>
<style type="text/css">
div.outer { position: relative; width: 100%; }
div.inner { position: absolute; }
div.a { left: 0; }
div.b { left: 1em; }
div.c { left: 2em; }
}
</style>
</head>
<body>
<div class="outer">
<div class="inner a">A</div>
<div class="inner b">B</div>
<div class="inner c">C Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis lacinia elit sed sapien sollicitudin vitae laoreet lectus hendrerit. 
Donec id lorem mi, vitae feugiat purus. Phasellus cursus, est et sodales 
ornare, lorem magna convallis felis, ac pharetra sem nisl vitae massa. 
Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Morbi at lectus ac nulla vestibulum tincidunt 
quis vel neque. Pellentesque ultricies, ipsum nec congue placerat, tortor 
enim tempor risus, viverra rutrum eros arcu non orci. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec 
ligula neque, lacinia in sodales vitae, aliquet at diam. Ut sed semper 
ligula.</div>
</div>
</body>
</html>

...which produces output like this:

DIV width floating issue in CSS