个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我正在学习响应式网页设计，但遇到了一个小问题。我有一个 <aside>和一个 <section>并排。我希望 aside 的大小相同，而 section 自动占据其余的宽度。这可能吗？
这是代码。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<body>
<aside id="sidebar">text</aside>
<section id="main">main section</section>
</body>
</html>
这是CSS。
*{
margin: 0px;
padding: 0px;
}
#main{
display: inline-block;
vertical-align: top;
background-color: red;
margin: -4px;
}
aside{
display: inline-block;
vertical-align: top;
width: 200px;
height: 100%;
margin: -4px;
background-color: blue;
}
这是 jsfiddle。 https://jsfiddle.net/ehftnp3u/
最佳答案
使用flex
#container .row {
display: flex;
}
#container aside {
width: 150px;
}
#container section {
flex: 1;
}
#main{
background-color: red;
}<div id="container">
<div class="row">
<aside>
<span>sidebar</span>
</aside>
<section id="main">
<span>main section</span>
</section>
</div>
</div>对于旧浏览器支持，您可以使用 display: table 或 float
示例使用 float
#container .row:after { /* clear fix for your float */
content: '';
display: table;
clear:both;
}
#container aside {
float: left;
width: 150px;
}
#container section {
margin-left: 150px;
}
#main{
background-color: red;
}<div id="container">
<div class="row">
<aside>
<span>sidebar</span>
</aside>
<section id="main">
<span>main section</span>
</section>
</div>
</div>
关于html - 让一个 div 响应地占据网页宽度的其余部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37903401/
26
4
0
我有一个布局对话框 主题 View .xml
我有两个 JPanel 放置在 JFrame 内，我希望它们都占据框架的整个宽度，但我不知道如何。另外，我不是 setBounds() 方法的忠实粉丝，因此我想知道是否有一种方法可以使组件采用完整宽度
我希望我的图表占据 100% 的 View ，我只想查看图表。我想删除那个空白。但我得到了这个结果: 这是我的 XMl 布局: 最佳答案 从 RelativeLayout 中删
我遇到以下困境: 单元格的尺寸正确，但 imageView 未填充单元格。我尝试通过控制从 imageView 拖动到单元格来向 imageView 添加约束。 这仍然没有填充单元格内的 imageV
我在显式宽度的父项中有许多子项，例如 document.querySelector('.parent').scrollTo(100,0) .parent { overflow: auto; w
我有一个 TextBox，旁边是一个带有 float:right 的 Button，它们都在一个具体宽度的 div 中。 Button 具有由宽度和高度定义的具体尺寸。我希望 TextBox 占据 B
我有一个如下所示的产品模板: 它的 html 是:
你好，当我的应用程序在网络上是响应式应用程序时，我遇到了一个小问题，当我调整浏览器大小时，一切看起来都很好，但是当我选择响应式选项时，我遇到了问题，看起来我的导航栏占用了大约 90%屏幕宽度而不是 1
我正在尝试创建 QScrollArea，其中 QHBoxLayout 包含一行 od QWidgets。我希望小部件占据所有可用高度并相应地调整其大小。 我的小部件是 QLabel，在内部显示按比例缩
我有一个具有以下项目布局的自定义 ListView : 除了 start_point 和 end_point 的高度不相等外，它显示的大部分与我想要的一样
我发现如果我有一个JMenuBar，并且它的最后一个元素(最右边的一个)是一个JMenuItem，它将占据上所有剩余的空白空间JMenuBar，这绝对不是我们想要的。 将“关于”JMenuItem 想
我在特定页面中有一个 DropDownMenu，该页面呈现在表格列内。 当我点击打开菜单时，它以 100% 的页面高度打开。 我在文档和社区中都找不到类似的东西。 我与子组件没有相对/绝对容器关系。
我有以下片段。它有一个问题 - Enter your passcode: td 占用太多空间，而且看起来很丑。 我尝试将 width:50% 设置为那个，但没有成功。 我想要实现的是输入字段与 Exp
这个问题在这里已经有了答案: CSS Single-column layout centered fixed-width 100% height w header and footer (5 个答案
我有以下网页。 我正在尝试让蓝红白渐变填充整个屏幕高度。目前我在内容容器的两侧都有两个标志，它们都被一个主容器包围。 .container{ width: 100%; background:
我无法让复选框 div 占据 100% 的高度，如下面的代码/ fiddle 所示。正如您从第二个 child 看到的那样，高度为 100%(悬停不会占据 100% 的高度)，但我也希望第一个 chi
如何使 container>ul>li>a 占据 container 的整个高度？ http://www.bootply.com/119627 除非 100%，否则我不想设置它的高度 最佳答案 您可以
我有一个 super View ，我在其中添加两个 subview (subview1 和 subview2)。 我希望 subview1 与 superview 具有相同的宽度并与 supervie
我有几个嵌套的 DIV。无论屏幕大小如何，我都希望我的第二个 Div 占据视口(viewport)的 100%。我在这个 div 中有两个图像和两个按钮。每当屏幕“变大或变小”时，按钮就会被推到父 d
在下面的代码中，我将 div 与类 container 的 display 属性设置为 flex 并且它有两个 div 类 sidebarcontainer 和 mainpage 的 child ，我
我是一名优秀的程序员,十分优秀！