相关疑难解决方法(0)

水平和垂直对齐多个div框

我正在使用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)

html javascript css jquery twitter-bootstrap

31
推荐指数
2
解决办法
3737
查看次数

如何水平对齐2个相邻的div而不浮动?

我想在彼此旁边制作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)

从上面的链接,我需要红色框在蓝色框的同一行,下面没有空格..

编辑:我希望红色的盒子留在容器灰盒子外面(就像它一样)谢谢

html css xhtml position

12
推荐指数
2
解决办法
5万
查看次数

标签 统计

css ×2

html ×2

javascript ×1

jquery ×1

position ×1

twitter-bootstrap ×1

xhtml ×1