个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我有一个非常标准的两列布局，但是内容列中的一个元素需要在水平滚动区域中提供其内容，该区域的(可见)宽度填充页面的其余部分，即填充其宽度包含列。通过在滚动区域上设置固定宽度，我可以获得(几乎)我需要的效果，但我需要它的宽度是动态的。这可以只用 HTML 和 CSS 来完成吗，还是我需要用 JS 手动设置和更新它的宽度？
这是一个fiddle .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout</title>
<style type="text/css">
div.top-menu { background-color: blue; height: 100px; color: #fff }
td.side-content { background-color: green; width: 150px; }
div.scrollable-area { width: 400px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}
div.scrollable-area > div.content-block { display: inline-block; padding: 5px; border: 1px solid #000; }
</style>
</head>
<body>
<div class="top-menu">(Top menu)</div>
<div>
<table>
<tbody>
<tr>
<td class="side-content">(Side content)</td>
<td>
<h1>Title</h1>
<div class="scrollable-area">
<div class="content-block">BLAH BLAH</div>
<div class="content-block">BLAH BLAH</div>
(ETC)
<div class="content-block">BLAH BLAH</div>
<div class="content-block">BLAH BLAH</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
最佳答案
将这些样式添加到您的表中:
table {
width: 100%;
table-layout: fixed;
}
然后您可以从 div.scrollable-area 中删除 width 样式。
关于html - 水平滚动区域，其可见宽度填满流动宽度页面的剩余部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27905840/
25
4
0
目前我找到的最佳解决方案是: http://jsfiddle.net/kizu/UUzE9/ 但事实并非如此。你看，我有三列；其中两个需要避免明确调整大小。好吧，第二个确实需要调整大小；但不完全是。
假设我们有两种类型和它们的联合: type A = {tag: 'a'}; type B = {tag: 'b'}; type U = A | B; 以及返回 A 或 B 的函数，具体取决于提供的标签
我有四个 div。 div 2 是 div 1 高度的一半，div 3 & 4 是 div 2 高度的一半。 在大显示器上 div 的位置很好: ---------------- ----------
要使用 display: block 居中元素，人们使用 margins: auto。如果我将 max-width 设置为需要居中的子项，并且它周围有足够的空间，它将根据需要尽可能多地流动到 max-
我试图获得的效果是在 bootstrap 中使用列从左到右文本流动的位置。在第一个部分的第十二列之后，我想换行，希望代码能让它更清晰。
我知道固定列可以在 X 轴和 Y 轴上溢出'。我还在某处读到，如果您将其中一个轴设置为自动/滚动，则另一组将继承前一个轴的行为，除非它被设置为 hidden。 我的困境是:我有一个固定的列
我基本上想要这个: ----------------------------------------------------------------- |
我正在尝试构建一个由三个主要 block 组成的移动就绪设计，广告 block 、内容 block 和侧边栏 block (加上页眉和页脚，但这些对于这个问题并不重要)。 想法是让广告和侧边栏具有固定
我正在关注这个guide上传照片。代码工作正常，但 flowtype 会告诉我有一个错误:调用方法“append”。不能在交集类型交集的任何成员上调用函数 出现错误后，流程不会传递该代码是有道理的，因
通过研究引用应用程序和阅读手册，我对 Spring WebFlow 2.1 有了第一印象。在进一步讨论之前，我想问一下对这个社区的印象。 实际上，我计划我的网站只包含一个网页。其他所有内容(登录/注销
我不确定为什么，但我得到这个文本显示/流动在 之外标签。我认为这与 float 有关，但我已经尝试了所有我知道的解决方案来修复它，但它们都没有奏效。 这是 jsfiddle(我在 Safari 中)
典型的 ISP 设置。一台服务器是 Web 服务器，另一台是 DB SQL 服务器。在两台计算机上创建了一个本地管理员帐户(假设为 XYZ)。因此，当我远程登录时，我要么是 WebServer\XYZ
我无法理解 IE7 中的 float 问题。我 div 包含一个向右浮动的列表，以便文本保持在左侧。我使用的方法在其他浏览器中有效，但在 IE7 中无效。我简化了代码以使问题更清楚:
我有两个街区。其中一个呈三 Angular 形。如何围绕这个 div 文本流动？例子: HTML: Triangle Lorem ipsum dolor sit a
我在网上搜索过，似乎找不到一个干净、简单、所有浏览器都友好的 3 列布局。 我希望有 3 列布局，左列固定为 200px，右列固定为 200px，中间列为剩余宽度，但最小宽度为 600px。所以整体最
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this q
我是一名优秀的程序员,十分优秀！