html - 使 div 向左浮动，但如果文本太长则不为 "fall"-6ren

html - 使 div 向左浮动，但如果文本太长则不为 "fall"

转载作者：技术小花猫更新时间：2023-10-29 12:19:09

我很抱歉这个可怕的标题。

本质上，我有一个包含 div 的包含两个 div 的 position: relative; 和 float: left;。第一个 div 设置为 200px(根据其内容)，因为它将包含的所有内容都不会按宽度方向增长。

但是，第二个 div 我只想增长到包含 div 的一侧。包含的 div 没有设置宽度，因为我的屏幕是垂直的，而且我知道大多数人的屏幕都是水平的。我在多台计算机上对其进行了测试，因此我知道这两个版本的效果如何。

但是，回到正题，在第二个 div 中，如果我输入的短语比包含 div 的其余部分长，那么第二个 div 下降到第一个 div 下面。我不希望第二个 div 有固定宽度，那么有没有办法设置最大宽度？如果是这样，有没有办法将它设置为包含 div 的任何内容？我真的不想拉屏幕分辨率什么的，所以希望有另一种方式。

谢谢你的帮助。

Cut down code and CSS on jsFiddle.net

最佳答案

overflow is the magic word.

您可以使用它来摆脱丑陋的清除 div，并让第二个 div 占用 float 旁边剩余的空间。

此外，CSS 中的 .content div:last-child 规则适用于空的清除 div 而不是第二列，因此它实际上没有做任何事情。

这是它的样子(和 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>

关于html - 使 div 向左浮动，但如果文本太长则不为 "fall"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7010327/

文章推荐： html - 在 css 级别和元素级别定义的输入宽度

文章推荐： ruby - 使用 rvm 在我的 linux 终端中出错

文章推荐： php - 处理 gem 数据

技术小花猫

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 使 div 向左浮动，但如果文本太长则不为 "fall"