让一个div向左浮动，但不能“下降”如果文字太长 [英] Making a div float left, but not "fall" if text is too long
问题描述
基本上，我有一个包含 div 的函数，其中包含两个 div s with position：relative; and float：left; 。第一个 div 被设置为 200px （凭借其内容），因为它包含的所有内容都不会增长不过，第二个 div 我想只增长到包含格。包含 div 没有设置宽度，因为我的屏幕是垂直的，我知道大多数人都是水平的。我在多台计算机上测试它，所以我知道它们在两个版本中都是什么样子。
div ，如果我放入比包含 div 其余部分更长的短语，则第二个 div 降到第一个 div 以下。我不希望这第二个 div 具有设置宽度，那么是否有设置最大宽度的方法？如果是这样，是否有办法将它设置为包含 div 剩下的内容？我真的很喜欢不必拉屏幕分辨率，什么不是，所以希望有另一种方式。 感谢您的帮助。
您可以使用它来摆脱那个丑陋的清除div，并让第二个div占用浮动旁边的任何空间。
另外，您在CSS中使用的 .content div：last-child 规则适用于空清除div而不是你的第二列，所以它实际上并没有做任何事情。
以下是它的样子（和 updated fiddle ）：
<！doctype html> ;
< style>
.content {
margin：10px;
padding：0;
border：1px纯黑色;
overflow：hidden; / *替换< div class =clear/> * /
}
.columns {
position：relative;
float：left;
padding-right：20px;
margin-bottom：10px;
}
.c2 {
float：none; / *不要浮动这个列... * /
overflow：hidden; / * ...创建一个新的块格式上下文，而不是* /
padding-right：10px;
word-wrap：分词;
}
< / style>
< div class =content>
< div class =columns>
< img src =＃height =200pxwidth =200px/>
< / div>
< div class =columns c2>
TestingTestingTestingTesting
< / div>
< / div>
I'm sorry for the horrible title.
Essentially, I have a containing div which contains two divs with position: relative; and float: left;. The first div is set to 200px (by virtue of its contents) because everything it will contain is not meant to grow width-wise.
However, the second div I want to grow only to the side of the containing div. The containing div does not have a set width as I have my screens vertical and I know most people have theirs horizontal. I test it on multiple computers, so I know what it looks like in both versions.
However, back to the point, in the second div, if I put in a phrase longer than the rest of the containing div, then the second div drops to below the first div. I don't want this second div to have a set width, so is there a way to set a max-width? And if so, is there a way to set it to whatever the containing div has left? I'd really like to not have to pull screen resolution and what not, so hopefully there's another way.
Thank you for the help.
Cut down code and CSS on jsFiddle.net
You can use it both to get rid of that ugly clearing div, and to have the second div take up whatever space is left next to the float.
Also, the .content div:last-child rule you have in your CSS applies to the empty clearing div instead of your second column, so it isn't actually doing anything.
Here's what it will look like (and the updated fiddle):
<!doctype html>
<style>
.content {
margin: 10px;
padding: 0;
border: 1px solid black;
overflow: hidden; /* replaces <div class="clear"/> */
}
.columns {
position: relative;
float: left;
padding-right: 20px;
margin-bottom: 10px;
}
.c2 {
float: none; /* Don't float this column... */
overflow: hidden; /* ... Create a new block formatting context instead */
padding-right: 10px;
word-wrap: break-word;
}
</style>
<div class="content">
<div class="columns">
<img src="#" height="200px" width="200px" />
</div>
<div class="columns c2">
TestingTestingTestingTesting
</div>
</div>
这篇关于让一个div向左浮动，但不能“下降”如果文字太长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
