我正在使用https://almsaeedstudio.com/preview主题,它提供了一些精彩的盒子布局和社交小部件框布局,我想在我的项目中使用它.
请参阅简单的框截图
和社交小工具框
我试图水平排列多个简单的盒子,每个简单的盒子可以包含多个社交小部件盒子.
请参阅此屏幕截图以获得更清晰:
我尝试使用现有的简单框和社交小部件框代码,然后想出这个代码片段.
我创建了这个plunker,不知何故css没有正确加载.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div style="overflow:auto;">
<div class="" style="width:2050px;">
<div class="box" style="display:inline-block;width:1000px;">
<div class="box-header with-border">
<h3 class="box-title">Monthly Recap Report</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<div class="btn-group">
<button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated …
Run Code Online (Sandbox Code Playgroud)我想在彼此旁边制作2个div,以在没有FLOAT的同一水平线上对齐
我试过位置:相对,但没有运气
请参阅以下示例:http: //jsfiddle.net/XVzLK
<div style="width:200px;height:100px;background:#ccc;">
<div style="background:Blue; float:left; width:100px; height:100px;"></div>
<div style="background:red; float:left; margin-left:100px; width:100px; height:100px;"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
从上面的链接,我需要红色框在蓝色框的同一行,下面没有空格..
编辑:我希望红色的盒子留在容器灰盒子外面(就像它一样)谢谢