- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我需要在左右栏之间放置内容,前提是内容 block 高于左右栏 block 。我试着用 float: right;在内容的样式中,它只对齐图中的示例。
如何使列之间的内容 block 居中?我的代码是:
#left {
width:220px;
height:200px;
background:yellow;
float:right;
}
#content {
float:right;
}
#right {
width:220px;
height:200px;
float:left;
background:grey;
}
<div id="main">
<div id="content">Content</div>
<div id="left">left col</div>
<div id="right">right col</div>
</div>
最佳答案
为此只需使用flex
。重新排序 div
以将 #content
放在中间并告诉 #content
元素填充剩余空间:
#main {
display: flex;
justify-content: space-between;
}
#left {
width:220px;
height:200px;
background:yellow;
}
#content {
flex: 1 1 auto;
}
#right {
width:220px;
height:200px;
background:grey;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head><title>Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./styles.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="left">left col</div>
<div id="content">Content</div>
<div id="right">right col</div>
</div>
</body>
</html>
如果您绝对必须首先拥有content
元素,然后使用order
对列顺序进行排序:
#main {
display: flex;
justify-content: space-between;
}
#left {
width:220px;
height:200px;
background:yellow;
order: 1;
}
#content {
flex: 1 1 auto;
order: 2;
}
#right {
width:220px;
height:200px;
background:grey;
order: 3;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head><title>Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./styles.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="content">Content</div>
<div id="left">left col</div>
<div id="right">right col</div>
</div>
</body>
</html>
关于html - 如果此 block 较高,如何在左右列之间放置一个内容 div block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59104554/
我正在尝试用 java 编写具有以下输出的 java 代码。 ---JGRASP exez: java Guess Is the number 50? H Ia the number
如果查看 Azure 存储中磁盘的定价等级(截至目前,美国东部地区的高级 SSD 低于一级),就会发现提供的 IOPS 越高,磁盘大小就越大。 人们可以选择更高的性能层,但使用较小的磁盘大小(尽管这可
如果查看 Azure 存储中磁盘的定价等级(截至目前,美国东部地区的高级 SSD 低于一级),就会发现提供的 IOPS 越高,磁盘大小就越大。 人们可以选择更高的性能层,但使用较小的磁盘大小(尽管这可
我是 azurewebsites 服务的新用户,我很高兴为什么我的网站发送了太多数据。服务器在 8 小时内输出了 55GB 数据。我的网站不包含任何大文件,它只是一个名片网站。我如何检查发生了什么?此
我希望我的 Bootstrap 轮播在图像上方有一个点覆盖。 Carousel Caption 应位于虚线叠加层之上。我无法让它与 z-indexes 一起工作。 我做错了什么吗? (可能安静 :-)
我正在使用动态编程来解决一个问题,其中我将得到 n 并且需要输出最小数量的操作以通过使用这三个操作(-1,/2,/3)从 n 中获得 1。给定约束(1 using namespace std; int
我需要在左右栏之间放置内容,前提是内容 block 高于左右栏 block 。我试着用 float: right;在内容的样式中,它只对齐图中的示例。 如何使列之间的内容 block 居中?我的代码是
我有一个非常简单的网页设置,由 div、标题和 i 元素组成的网格: 我想要做的就是在这个网格后面添加一个带有背景颜色和标题的 div,网格的元素出现在新背景 div 的顶部。 但是,当我尝试这样做时
大家,我是数据科学的新手。我正在使用支持向量回归来解决回归问题。使用网格搜索调整 SVM 参数后,我得到了 2.6% MAPE,但我的 MAE 和 MSE 仍然非常高。 我为mape使用了用户定义的函
我是一名优秀的程序员,十分优秀!