.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
由于你.test2
div上没有max-width
或width
属性,所以第二个div的宽度被视为屏幕宽度以表示文本。尝试将其中任何一个放在.test2
上。它应该工作。
看来你正在使用bootstrap,所以使用bootstrap网格系统。我使用了col-sm-2和col-sm-10 classe,我已经删除了test和test2类
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-2">
<button type="button" class="btn btn-success">Success</button></div>
<div class="col-sm-10">
<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>