html - 显示:内联块不工作
问题描述
.test,
.test2 {
display: inline-block;
}
<div class="container">
<div class="row">
<div class="test">
<button type="button" class="btn btn-success">Success</button></div>
<div class="test2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta odit omnis maiores quis, tempore ut dolorum iure, nesciunt dolores laboriosam cumque praesentium blanditiis porro repellat numquam. Ducimus, dolores atque accusantium!
</span>
</div>
</div>
</div>
http://jsfiddle.net/x1hphsvb/6270/
我有两个 div,我想将它们放在一起。
解决方案
为此添加display: flex;
_.row
http://jsfiddle.net/x1hphsvb/6277/
.test, .test2 {
display: inline-block;
}
.row {display: flex;}
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="test">
<button type="button" class="btn btn-success">Success</button></div>
<div class="test2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta odit omnis maiores quis, tempore ut dolorum iure, nesciunt dolores laboriosam cumque praesentium blanditiis porro repellat numquam. Ducimus, dolores atque accusantium!
</span>
</div>
</div>
</div>
要了解有关显示属性的更多信息 - https://www.w3schools.com/cssref/pr_class_display.asp
推荐阅读
- ms-access - 更改子表单列的颜色
- linux - SHELL SCRIPT LINUX 使用用户输入设置密码
- java - Java - 无法使用 ObjectMapper 反序列化没有双引号的 json
- python - 从表中获取用逗号分隔的字符串
- sublimetext3 - “REPL 中的评估”在 Sublime Text 3 中无效
- typescript - 通过声明文件从 TypeScript 模块中增加 `type`
- javascript - 通过带有字符串对象的数组进行映射并呈现 HTML 标签
- c++ - pybind11:不向下转换为非多态基类
- gpu - 运行 phoronix-test-suite 基准测试时如何选择 GPU?
- c++ - 我的三元“if”表达式有什么问题?