- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以当较小的 div 不跟随较高的 div 时,我遇到了这个恼人的问题。这个问题有解决方案吗?
.right { float:right;}
.left { float: left; }
.row:after {
content:"";
display:block;
clear:both;
}
<div class="row">
<div class=" col-3 col-m-12 right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
<div class="col-9 col-m-12 left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
最佳答案
display:table-cell
而不是 float:
.right, .left { display:table-cell; border:1px solid; }
<div class="row">
<div class=" col-3 col-m-12 right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
<div class="col-9 col-m-12 left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id facilisis augue, vel dictum velit. Nam rutrum, sem in finibus congue, neque sapien volutpat libero, ut pulvinar dui dolor non elit. Aliquam et rutrum orci, ut aliquet lorem. Maecenas eget nulla quam. Nullam sit amet ullamcorper augue.
</div>
关于html - 左边的 div 不调整到右边的 div 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33976742/
我正在开发一个需要在屏幕上查找对象的程序,到目前为止工作正常,但我遇到了多显示器配置问题。 GraphicsEnvironment.getLocalGraphicsEnvironment().getS
使用 mySql,我想列出客户对特定产品类别进行的所有购买。 所以,我有 3 个表:客户 (idCustomer, Name)、类别 (idCategory, CategoryName) 和订单 (i
我的网站上有一个关于 background-size:cover 的小问题我一直在 Firefox 中测试它,但是当我在谷歌浏览器中加载页面时,我在左边得到 1px 的白色。当我使用 backgrou
我已经搜索了几个小时来找到解决我的问题的方法,但没有成功。我遇到的问题是两个按钮的垂直堆叠。 这就是我想要做的:它说按钮在这里两次是我试图放置按钮的地方,但我所能做的就是让它们水平排列而不是垂直排列。
我有一个包含多个元素的导航栏。 Left1 Left2 Left3 Right1 Right2 Right3 我不知道如何将“fixedLef
您好,我正在尝试让 2 个 div 在左侧与右侧对齐。 #div1 #div2 #div1 #div2 #div3 #div2 #div3 #div3 诀窍是当浏览器窗口变小时,我希望#div2 位于
body { font-family: Arial, Helvetica, sans-serif; font-size: 13px;
这个问题在这里已经有了答案: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties? (6
这是我的代码的 jsfiddle 链接: https://jsfiddle.net/Krisalay/zvxxeagh/ 我的 HTML 代码是: MESSAGE 1
所以我有 10 个复选框,每个标签都取自数组中相应的索引。我正在使用 ng-repeat 来展示它们: {{entity}}
我是一名优秀的程序员,十分优秀!