- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
这可能是一个非常简单的答案,但它让我感到沮丧。我有一个并排放置 2 个元素的 flex 容器;一面有图像,另一面有内容。在内容中,它在水平和垂直方向上都居中,但内容非常紧密地相互堆叠(标题、文本、按钮)。有没有办法让它们围绕卡片的高度均匀分布?
#container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#container-image>img {
display: block;
width: 100%;
}
#container-image {
flex: 1;
}
#container-content {
flex: 2;
align-self: center;
text-align: center;
}
.button {
background-color: blue;
color: white;
padding: 6px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
border: 1px solid #34495e;
}
HTML:
<section id="container">
<div id="container-image">
<img src="https://www.placecage.com/c/1500/2000" alt="" />
</div>
<div id="container-content">
<h3>title</h3>
<p>some text about this card</p>
<a class="button">more...</a>
</div>
</section>
最佳答案
考虑使用列方向的文本的另一个 flexbox 容器,然后您可以轻松地将它们按照您想要的方式隔开:
#container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#container-image>img {
display: block;
width: 100%;
}
#container-image {
flex: 1;
}
#container-content {
flex: 2;
text-align: center;
display:inline-flex;
flex-direction:column;
justify-content:space-evenly; /*you can also use space-between OR space-around*/
}
.button {
background-color: blue;
color: white;
padding: 6px 30px;
text-align: center;
display: inline-block;
align-self:center;
font-size: 16px;
border: 1px solid #34495e;
}
<section id="container">
<div id="container-image">
<img src="https://www.placecage.com/c/1500/2000" alt="" />
</div>
<div id="container-content">
<h3>title</h3>
<p>some text about this card</p>
<a class="button">more...</a>
</div>
</section>
关于css - Flexbox - 卡片中的内容均匀分布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51698302/
我有代码可以制作任意长度的二进制列表,并打开随机位数: rand_binary_list = lambda n: [random.randint(0,1) for b in range(1,n+1)]
假设我有 20 个攻击回合的回合制游戏,并且玩家的攻击速度决定了他们攻击的频率,当一个人的攻击速度为 5 时,您将如何计算和/或绘制一张“谁在何时攻击”的表格另一个速度为8? (这些是测试值,我将使用
我将我的类定义为: final class Key> { private final T q; private final T o; public Key(T q1, T o1
想象一下10辆车随机,均匀分布在长度为1的圆形轨道上。如果位置用[0,1>范围内的C double表示,那么它们可以排序,车之间的间隙应该是车的位置前面减去后面汽车的位置。最后一个间隙需要添加 1 来
我正在尝试构建一个均匀分布矩阵,每一行都以相同的速率衰减到 0。分布应该在 -1 和 1 之间。我正在看的是构建类似于以下内容的东西: [[0.454/exp(0) -0.032/exp(1) 0.6
我希望盒子像这样展开: 彼此正好相距 218 像素。 我试着把它们都放在一起,但我无法做到完美! .box1, .box2 { margin: 0 20px } 有没有更好的方法来解决这个问题? 忘了
所以我一直在构建一个程序,该程序使用蒙特卡罗模拟来寻找进化图论的属性。它的一个关键功能是能够生成均匀分布的随机图,这样我们就可以确定图的广义性质。对于连接无向图的情况,我已经实现了 this 中概述的
在响应式网站的页脚中,我需要均匀分布一些 li 项。 这是我想要实现的: 这就是我所拥有的: 我想避免为每个 li 设置绝对宽度,以保持网站这部分的响应能力。 继续进行的最佳方式是什么? 最佳答案 你
LinearLayout 的常见用法是平均空间(权重) View ,例如: 如何使用新的 ConstraintLayout 实现这样的等间距 View ? ConstraintLayout 引用链接:
如果我在一个集群中创建 3 个节点,我如何在容器之间均匀分布 docker 容器?例如,如果我创建一个由 3 个节点组成的集群,每个节点上有 8 个 cpu,我通过性能分析确定,当我在每个 cpu 上
我有一个包含 ViewModel 的 ObservableCollection,它又定义了我的按钮定义。 我已经做了几个小时了,一篇又一篇地阅读文章,但无济于事。我试过使用列表框,这是我最接近的。我的
如何使用 ConstraintLayout 获得 5 个均匀分布的正方形,并根据屏幕宽度设置灵活大小? 最佳答案 您需要创建一个连接在其父容器所有边上的小部件链(您可以将此父容器的尺寸设置为您想要/需
我有 100 个元素以随机顺序进入视口(viewport)。它们需要一起在 DOM 容器内形成一个圆圈。我需要一些方法来计算元素需要移动到的位置... 结构是这样的: http://codepen.i
我正在尝试在 Storyboard中为 iPad 和 iPhone 创建用户界面。 iphone 版本少了 1 个按钮。所有按钮和辅助 View 都固定在底部的 LayouGuide 上。此外,我正在
我正在向 添加图像和一些文本输入 (FloatLabelTextInput)在 react native 应用程序中。到目前为止,我在使用 flex 将图像和文本输入均匀分布在 y 轴上时运气不佳。
有一个导航栏 ,里面是一个每个 包含 带有链接(这是用于导航栏) 我查看了 Google 和这个网站,但找不到我要找的东西。 我想要的是能够保持我当前的风格(使用 和 在里面),我想要 在 内
我正在尝试创建一个布局,其中每个 DIV 的最大宽度为 300 像素。 如果屏幕是 600 像素,那么两个 100% 的 div 应该并排放置。如果屏幕是 700px,那么三个 233px(每个 DI
我实现了 Xorshift 生成器和其他生成器来比较它们在我的系统(Windows 和 Linux)上的性能。 https://en.wikipedia.org/wiki/Xorshift http:
我想通过收敛概率曲线图比较几种算法。 目前,我的图表如下所示: 这不允许看到许多曲线的差异。 我希望 y Axis 为“对数”,但与值 1 不同,即我希望 y 值为 [0, 1/2, 3/4, 7/8
我是一名优秀的程序员,十分优秀!