两个div填充在同一行中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了两个div填充在同一行中相关的知识，希望对你有一定的参考价值。
我正在尝试创建一个仪表板示例。左div用于元素，右div用于内容详细信息。我在显示项目和同时保持两个div连续时遇到麻烦。
我的html
<body>
<div >
<div class="dash">
<span>Soba</span>
<p>xxxx</p>
</div>
<div class="content">
<p>xxxx</p>
<p>xxxx</p>
<p>xxxx</p>
<p>xx2323232x</p>
</div>
</div>
</body>
我的CSS
body{
width: 100%;
}
.dash{
display: inline-block;
margin-top: 20px;
width: 13%;
height: 800px;
border-style: dashed;
margin-left: 10px;
}
.content{
display: inline-block;
margin-left: 20px;
width: 83%;
height: auto;
border-style: dashed;
}
我的页面
答案
据我了解，您需要在两列中都添加vertical-align:top。我在下面创建了一个小提琴。希望对您有所帮助。
body {
width: 100%;
}
.dash {
display: inline-block;
margin-top: 0;
width: 13%;
height: 800px;
border-style: dashed;
margin-left: 10px;
vertical-align: top;
}
.content {
display: inline-block;
margin-left: 20px;
width: 83%;
height: auto;
border-style: dashed;
vertical-align: top;
}<div>
<div class="dash">
<span>Soba</span>
<p>xxxx</p>
</div>
<div class="content">
<p>xxxx</p>
<p>xxxx</p>
<p>xxxx</p>
<p>xx2323232x</p>
</div>
</div>以上是关于两个div填充在同一行中的主要内容，如果未能解决你的问题，请参考以下文章