简单 CSS 磁贴布局

Question

我需要一种简单的方法来使我的布局形成连续两个内容图块。目前 .cellleft 扩展到右端，因此 .cellright 显示在下一行。

div.cellleft{
            background-color: #191a1c;
            margin-top: 40px;
            margin-left: 100px;
            margin-right: 1px;
            padding-top: 1px;
            width: 43%;
        }
        div.cellright{
            background-color: #191a1c;
            margin-top: 40px;
            margin-right: 100px;
            margin-left: 1px;
            padding-top: 1px;
            width: 43%;
        }

如图所示的问题

Answer 1

要让你的 .cellleft 向左走，.cellright 向右走，试试这个：

.cellleft, .cellright {
width: 50%;
float: left;
}

.cellleft {
  background-color: red;
}

.cellright {
  background-color: blue;
}

.clearFloat {
  clear: both;
  }

<div class"row">

  <div class="cellleft">
  some contents here.. this is left cell
  </div>
  
  <div class="cellright">
  some contents here... this is right cell
  </div>

</div>

<div class="clearFloat"></div>

<div class"row">

  <div class="cellleft">
  some contents here.. this is left cell
  </div>
  
  <div class="cellright">
  some contents here... this is right cell
  </div>

</div>

<div class="clearFloat"></div>

<div class"row">

  <div class="cellleft">
  some contents here.. this is left cell
  </div>
  
  <div class="cellright">
  some contents here... this is right cell
  </div>

</div>

利用浮动。您也可以选择将 .cellright 浮动到右侧。

例如；为 .cellright

更改 css、float: right

希望这对您有所帮助。

Answer 2

请尝试以下CSS。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    display: inline-block;
    width:40%;
    margin:10px;
}
</style>
</head>
<body>

<div class"row">

  <div class="box">
  some contents here.. this is left cell
  </div>

  <div class="box">
  some contents here... this is right cell
  </div>

</div>

<div class"row">

  <div class="box">
  some contents here.. this is left cell
  </div>

  <div class="box">
  some contents here... this is right cell
  </div>

</div>

<div class"row">

  <div class="box">
  some contents here.. this is left cell
  </div>

  <div class="box">
  some contents here... this is right cell
  </div>

</div>

</body>
</html>

Answer 3

我找到了适合我的案例的理想解决方案：

.cell {
            width: 50%;
            height: 100%;
            float: left;
        }
        .contentbox{
            background-color: #191a1c;
            margin-top: 40px;
            margin-right: 1px;
            padding-top: 1px;
            margin-left: 50px;
            margin-right: 50px;
        }

<div class="cell">
            <div class="contentbox">
                stuff
            </div>
            <div class="contentbox">
                stuff
            </div>
        </div>
        <div class="cell">
            <div class="contentbox">
                stuff
            </div>
            <div class="contentbox">
                stuff
            </div>
        </div>

简单 CSS 磁贴布局

Simple CSS Tile Layout

html

css

tiles