个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我有 2 个并排的 div。在每个 div 中是另一个 div。然后我将我的文本放在两个内部 div 中。框和文本在宽屏桌面 View 中看起来很棒，但是一旦达到 1024 及以下，文本就会开始超出 div。
我希望 div 根据需要展开和折叠以包含文本并在边框和文本之间留出适当的间距。我不想使用 overflow hidden ，因为我需要显示所有文本。
<style>
.hometext {
box-sizing: border-box;
}
.hometext {
margin: 0;
}
/* Create two equal columns that floats next to each other */
.hometext {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
.hometextinner {
border:1px solid #999;
padding-top:10px;
padding-left:20px;
padding-right:20px;
height:100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.hometext {
width: 100%;
}
.hometextinner {
border:1px solid #999;
padding-top:10px;
padding-left:20px;
padding-right:20px;
height:100%;
}
}
</style><body>
<div class="row">
<div class="hometext">
<div class="hometextinner"><h2>Column 1</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p></div>
</div>
<div class="hometext">
<div class="hometextinner"><h2>Column 2</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p></div>
</div>
</div>
</body>最佳答案
如果您想要等高，请使用flexbox。
.row {
display: flex;
}
.row>.hometext {
flex: 1;
padding: 20px;
border: 1px solid;
}
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}<body>
<div class="row">
<div class="hometext">
<div class="hometextinner">
<h2>Column 1</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32.</p>
</div>
</div>
<div class="hometext">
<div class="hometextinner">
<h2>Column 2</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32.</p>
</div>
</div>
</div>
</body>提示
一个优点是您不必处理float 和clear。
关于html - 防止文本溢出到 DIV 之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48328331/
26
4
0
我正在努力解决一个问题 Rahul 正在玩一个非常有趣的游戏。他有 N 个圆盘(每个圆盘的半径相等)。每个磁盘都有一个不同的数字，从 1 到 N 与之相关联。磁盘一个接一个地放在一堆中。 Rahul
我正在尝试使用此代码发出请求: public JsonObject account() throws BinanceApiException { return (new Request
我使用的是 Mac OS 和 emacs -nw (终端模式)。 我不知道如何在 emacs 之外粘贴东西(已由 M-w 在 emacs -nw 中实现)。 我知道emacs -ns可以做到。 搜索互
我试图让导航栏菜单出现在“标题容器”菜单中，但由于某种原因，导航栏链接流到外面(在修改浏览器窗口之前)。我不明白为什么，但我怀疑它与这一行有关: div class="collapse navbar-
我们的项目是在 WAS 6.1/hibernate/struts 上使用 RAD 7.0 开发的中型 Web 应用程序，该应用程序已投入生产。目前我们在属性文件中硬编码了生产系统的 IP 地址，在 h
我的要求是在传单中创建 N 类型的标记。该列表很大，无法容纳在 map 区域中。 我想要类似的东西: http://blog.georepublic.info/2012/leaflet-example
如 docs 中所述，基于 spring-boot 的 Web 服务正在使用 Sentry .它工作正常，但不应将某些异常发送到 Sentry ，例如为了在某些请求上返回 HTTP 状态 410
我已经阅读了 Apple Core Animation 文档。它说核心动画没有提供在窗口中实际显示图层的方法，它们必须由 View 托管。当与 View 配对时， View 必须为底层图层提供事件处理
我试图在滚动时检查元素是否在我的视口(viewport)内。如果它在我的视口(viewport)之外，我会添加一个类来将元素固定到顶部。 我用来确定元素是否在视口(viewport)之外的函数是: i
我正在查询中创建一个弹出窗口。悬停时弹出窗口一切正常。当用户的鼠标离开 div 以关闭它时，我让它看到计时器启动。如果他在计时器完成之前再次进入 div，则计时器将被清除。 这很好，但是如果用户点击
我使用名为 zonemap 的字典创建了一个 4x6 区域 map 。我在该字典中嵌套了多个字典；每个区域代表玩家可以访问并与之互动的区域。我希望能够将玩家的移动限制在该 4x6 区域，并重新显示他们
我正在构建一个页面，该页面将使用 ajax 来更新主要内容区域。用户将单击左侧菜单栏中的项目来更新右侧的 div 并包含搜索结果。 我想检测用户是否向下滚动到目前为止导致右侧结果 div 移出视口(v
好的，我在 div 中有一个带有拖放类的表格，其溢出设置为“自动”，这允许我隐藏部分时间表，只在底部放置一个滚动条。但是，我只是在可滚动 div 之外创建了一些可放置元素，并且我的可拖动元素无法离开可
我有大量项目绑定(bind)到 ListBox，VirtualizingStackPanel 设置为它的 ItemsPanel。随着用户滚动和项目容器的创建，我做了一些工作来用数据填充项目(使用数据库
我想知道是否有一种方法可以将类成员的访问范围专门限定为在 C# 中获取/设置实现，以减少我意外直接访问它们的可能性。类似 private 的东西，但只允许 get/set 访问它，我想我可以将每个变量
我正在尝试编写一个小游戏，以应用我自己在本类(class)中学到的概念。当游戏打开时，我想要一个自定义模态视图来告诉用户如何玩。同样，当他们输了时，我想呈现一个结果页面，该页面将位于 if 语句内。我
我有一个非常具体的 HTML/CSS 和/或 JS 问题。我在 this fiddle here 创建了一个示例显示问题。 我有一个可滚动的 div，它是一个表的父级: ...我的表格行之一包
我的 jar 文件中打包了一个 exe，我试图将它复制到一个临时位置，以便我可以使用 Desktop.browse() 运行它，为此我设置了一个使用 class.getResourceAsStream
您好，我对这段代码有疑问。我的问题是第一个 console.log(smile_per_sec) 给了我需要的值，但是第二个给了我声明变量时给它的值。 $.getJSON( twitter
我必须更改标记弹出窗口的默认大小以容纳我想放入其中的数据。我更改了一些 map 设置，因此当用户将其拖出 View 时，它总是会弹回最大范围。我遇到的问题是，对于靠近边缘的标记，当它的弹出窗口打开时，
我是一名优秀的程序员,十分优秀！